2021-07-04 实现网页图片懒加载

思路

在图片没有进入可视区域时，先不给<img>的src赋值，
等到图片进入可视区域再给src赋值

1.加载loading图片
2.判断哪些图片要加载
3.隐形加载图片
4.替换真图片

代码

html

<img src="./load.gif" alt="pic" class="lazy" data-src="./14.jpg">
<img src="./load.gif" alt="pic" class="lazy" data-src="./25.jpg">
<img src="./load.gif" alt="pic" class="lazy" data-src="./43.jpg">
<img src="./load.gif" alt="pic" class="lazy" data-src="./59.jpg">
<img src="./load.gif" alt="pic" class="lazy" data-src="./30.jpg">
<img src="./load.gif" alt="pic" class="lazy" data-src="./40.jpg">
<img src="./load.gif" alt="pic" class="lazy" data-src="./34.jpg">

js

//等所有的资源文件加载完毕
window.onload = function() {
    // 获取图片列表
    var imgs = document.querySelectorAll('img');
    // 懒加载实现
    function lazyload(imgs) {
        for (var i = 0; i < imgs.length; i++) {
            //图片进入可视区时懒加载:可视区域高度和滚动区域高度之和大于图片距离顶部的距离
            if ((window.innerHeight + document.documentElement.scrollTop) > imgs[i].offsetTop) {
                //()()解决异步问题
                (function(i) {
                    setTimeout(function() {        
                            imgs[i].src = imgs[i].getAttribute('data-src')
                        };
                    }, 2000);
                })(i)
            }
        }
    }
    // 滚屏函数
    window.onscroll = function() {lazyload(imgs);}

效果