图片预加载和懒加载的实现方法

以你之姓@ 2021-09-02 05:57 558阅读 0赞

图片预加载即提前加载图片，可保证图片快速、无缝地发布，用户需要查看时可直接从本地缓存中渲染，适用于图片占据很大比例的网站。

方法1,在CSS background中加载：会增加页面的整体加载时间

#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }
    #preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }

方法2，JS new image对象，设置src加载：

方法3，Ajax预加载,new Image()对象设置src

window.onload = function() {
        setTimeout(function() {
            // XHR to request a JS and a CSS
            var xhr = new XMLHttpRequest();
            xhr.open('GET', url;);
            xhr.send();
            xhr = new XMLHttpRequest();
            xhr.open('GET', url;);
            xhr.send();
            // preload image
            new Image().src = ";;
        }, 1000);
    };

懒加载：将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Lazyload 2</title>
        <style>
        img {
            display: block;
            margin-bottom: 50px;
            height: 200px;
        }
        </style>
    </head>
    <body>
        <img src="images/loading.gif" data-src="images/1.png">
        <img src="images/loading.gif" data-src="images/2.png">
        <img src="images/loading.gif" data-src="images/3.png">
        <img src="images/loading.gif" data-src="images/4.png">
        <img src="images/loading.gif" data-src="images/5.png">
        <img src="images/loading.gif" data-src="images/6.png">
        <img src="images/loading.gif" data-src="images/7.png">
        <img src="images/loading.gif" data-src="images/8.png">
        <img src="images/loading.gif" data-src="images/9.png">
        <img src="images/loading.gif" data-src="images/10.png">
        <img src="images/loading.gif" data-src="images/11.png">
        <img src="images/loading.gif" data-src="images/12.png">
        <script>
    
        function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
            var timeout = null,//进行去抖处理
            startTime = new Date();
            return function() {
            var curTime = new Date();
            clearTimeout(timeout);
            if(curTime - startTime >= atleast) {
                fn();
                startTime = curTime;
            }else {
                timeout = setTimeout(fn, delay);
            }
            }
        }
        function lazyload() {
            var images = document.getElementsByTagName('img');
            var len    = images.length;
            var n      = 0;      //存储图片加载到的位置，避免每次都从第一张图片开始遍历        
            return function() {
            var seeHeight = document.documentElement.clientHeight;
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            for(var i = n; i < len; i++) {
                if(images[i].offsetTop < seeHeight + scrollTop) {
                    if(images[i].getAttribute('src') === 'images/loading.gif') {
                     images[i].src = images[i].getAttribute('data-src');
                    }
                n = n + 1;
                 }
            }
            }
        }
        var loadImages = lazyload();
        loadImages();          //初始化首页的页面图片
        window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
    　　//函数节流（throttle）与函数去抖（debounce）处理,
    //500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则立即执行该函数，不然则延迟 500ms 执行该函数
        </script>
    </body>
    </html>