图片懒加载的原理

页面同时展示过多的图片，会影响页面的加载速度，同时会浪费流量，对服务器也会有更大的压力。 懒加载的原理是，先把src值设置为空或者一张占位图，避免http加载图片地址 等到合适的时机再赋值src图片路径。 啥是合适的时机？ 借用网友的一张图片：

待加载图片的高度 < 滚动条高度+可视区域高度时，才展示图片。

看代码：

 img{
     width: 300px;
     height: 300px;
     }
<ul>
    <li> <img src="" data-src="./1.jpg"></li>
    <li> <img src="" data-src="./2.jfif"></li>
    <li> <img src="" data-src="./3.jfif"></li>
    <li> <img src="" data-src="./4.jpg"></li>
</ul>

    <script>
        let imgs = document.querySelectorAll('img')
        function getScrollTop(e){

            return e.offsetTop
        }

       function lazyload(imgs){
           let h = window.innerHeight; //可视区域的高
           var s = document.documentElement.scrollTop //滚动条高度

           for(let i=0;i<imgs.length;i++){
               if(getScrollTop(imgs[i])<h+s){
                    imgs[i].src = imgs[i].getAttribute('data-src')
               }
           }
       }


       lazyload(imgs)
        window.onscroll  = function(){
            lazyload(imgs)
        }
    </script>

实现的页面展示：

初始化展示首屏图片：

使用滚动条，当图片出现在可视区域，赋值该img src=图片路径：

滚动条频繁触发，可以使用防抖函数优化请求次数。