前端性能优化--懒加载和预加载

懒加载

代码实现

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="lazyload.css">
</head>

<body>
    <div class="image-list">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/252339290/TB29PYUXnIlyKJjSZFrXXXn2VXa_!!252339290-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/24687421/TB2Xg1izsyYBuNkSnfoXXcWgVXa_!!24687421-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/890151842/TB2II1mnZbI8KJjy1zdXXbe1VXa_!!890151842-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2096513830/TB2l1W0kRnTBKNjSZPfXXbf1XXa_!!2096513830-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i3/2586222636/TB2RDGrpqAoBKNjSZSyXXaHAVXa_!!2586222636-0-daren.jpg_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/1870112525/TB2Ae.xbOwIL1JjSZFsXXcXFFXa_!!1870112525-2-beehive-scenes.png_250x250xz.jpg" alt="">
        <img src="" class="image-item" lazyload="true" data-original="https://img.alicdn.com/imgextra/i2/2194952831/TB2PwWty7qvpuFjSZFhXXaOgXXa_!!2194952831-0-beehive-scenes.jpg_250x250xz.jpg" alt="">
    </div>
    <script src="./lazyload.js"></script>
</body>

</html>

css

.image-item {
    display: inline-block;
    width: 100%;
    height: 300px;
    background: gray;
}

js

        var viewHeight = document.documentElement.clientHeight;

        function lazyload() {
            var imgs = document.querySelectorAll('img[data-original][lazyload]');
            imgs.forEach(item => {

                if (item.dataset.original == '') {
                    return;
                }
                var rect = item.getBoundingClientRect();
                if (rect.bottom >= 0 && rect.top < viewHeight) {
                    var img = new Image();
                    img.src = item.dataset.original;
                    console.log(img.src)
                    img.onload = function() {
                        item.src = img.src;
                    }
                    item.removeAttribute('data-original');
                    item.removeAttribute('lazyload')
                }
            })
        }
        lazyload();
        document.addEventListener('scroll', lazyload)

效果

蓝色为已经请求加载的图片
红色为还没有请求加载的图片

默认打开，没有操作前

向下滚动前

向下滚动后

冷门属性

ocument.addEventListener（事件监听）

document.addEventListener('scroll', function() {
    console.log('aa')
})

dataset

用`dataset.original`获取`data-original` 的属性

img.onload

事件在图片加载完成后立即执行

getBoundingClientRect

用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性

文档各种高度

document.documentElement.clientHeight:视口的大小
document.documentElement.scrollHeight:文档的大小
document.documentElement.offsetHeight:文档的大小

预加载

new Image()

var image = new Image();
image.src = 'https://img.alicdn.com/imgextra/i4/2260152888/O1CN01vw2e251XCkJr0VPZU_!!2260152888-0-beehive-scenes.jpg_250x250xz.jpg';

<script src='./myPreload.js'></script>

xml

    <script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
    <script>
        var queue = new createjs.LoadQueue();
        queue.installPlugin(createjs.Sound);
        queue.on("complete", handleComplete, this);
        queue.loadFile({
            id: "sound",
            src: "http://path/to/sound.mp3"
        });
        queue.loadManifest([{
            id: "myImage",
            src: "path/to/myImage.jpg"
        }]);

        function handleComplete() {
            createjs.Sound.play("sound");
            var image = queue.getResult("myImage");
            document.body.appendChild(image);
        }
    </script>

前端性能优化--懒加载和预加载

懒加载

代码实现

html

css

js

效果

默认打开，没有操作前

向下滚动前

向下滚动后

冷门属性

ocument.addEventListener（事件监听）

dataset

img.onload

getBoundingClientRect

文档各种高度

预加载

标签

new Image()

xml

渣渣辉

引用和评论

springboot(二)、RestApi

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号