JS实现懒加载

懒加载及应用场景

懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。
当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。

实现的思路：

给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-src），
监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，加载图片，在图片未加载时，用alt 属性，在图像无法显示时的替代文本

css:

<style>
       .imgs{
           display: flex;
           flex-direction: column;
           text-align: center;
           width: 500px;
       }
       .img-item{
           height:600px;
           width: 400px;
           margin: 10px;
       }
   </style>

 <div class="imgs">
       <img data-src="imgs/1.jpg" alt="loading" class="img-item">
       <img data-src="imgs/2.jpg" alt="loading" class="img-item">
       <img data-src="imgs/3.jpg" alt="loading" class="img-item">

   </div>

JS:

<script>
     let imgs = document.querySelectorAll('img');
       let lazyload = function(){
           let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 	//获取浏览器滚动高度
           let height = window.innerHeight; 	//获取浏览器可视高度
           for(let i=0;i < imgs.length;i++){
               //如果元素距离文档顶部的高度小于浏览器的滚动高度加浏览器的可视高度，则需要加载
               if(imgs[i].offsetTop < scrollTop + height ){	  //imgs[i].offsetTop 距离文档顶部的高度
                   imgs[i].src = imgs[i].getAttribute('data-src'); //将data-src属性值赋值给src
               }
           }
       }
       //调用懒加载函数,加一个防抖函数
       function throttle(method,delay){
          let timer = null;
           return function(){
               clearTimeout(timer);
               timer=setTimeout(function(){
                   method()
               },delay);
           }
       }
       window.onscroll = throttle(lazyload,200);

</script>