js 懒加载

网页中图片过多遇到的问题
有时候一个网页会包含很多的图片，例如淘宝京东这些购物网站，商品图片多只之又多，页面图片多，加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片，并发情况下，达到1000并发，即同时有1000个人访问，就会产生1个G的带宽。

为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。

懒加载原理

一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。

先写一个简单的样式

<style>
      *{padding: 0;margin: 0;}
       .warpper{
           width: 1650px;
           display: flex;
           margin: auto;
           flex-wrap: wrap;
           border: 1px solid red;
       }
       .warpper>div{
           width:250px;
           height:400px;
           margin-left: 20px;
           margin-top: 20px;
           border-radius: 15px;
           overflow: hidden;
       }
       .warpper>div:hover img{
           transform: rotateZ(360deg) scale(1.1);
       }
       .warpper>div img{
           width: 100%;
           height: 100%;
           transition: all 1s;
           opacity: 1;
           cursor: pointer;
       }
 </style>

内容部分

 <div class="warpper">
        <div><img _src="./imgs/01.jpg" alt=""></div>
        <div><img _src="./imgs/02.jpg" alt=""></div>
        <div><img _src="./imgs/03.jpg" alt=""></div>
        <div><img _src="./imgs/04.jpg" alt=""></div>
        <div><img _src="./imgs/05.jpg" alt=""></div>
        <div><img _src="./imgs/06.jpg" alt=""></div>
        ...//还有多张图片
 </div>

分析：

如果当 可视区的高度 + 鼠标滚动的距离 大于或等于时，图片应该需要开始加载。
如上图所示，让在浏览器可视区域的图片显示，可视区域外的不显示，所以当图片距离顶部的距离等于可视区域和滚动区域高度之和时说明图片马上就要进入可视区了，就是说当top <= height+scroTop时，图片在可视区。

js：

 // 获取所有的图片
   let aimge = document.getElementsByTagName('img');
   // 获取可视区的高度
   let height = document.documentElement.clientHeight;
   //滚动条监听事件
   window.onscroll = function(){
   //获取滚动条滚动的距离
       let scroTop = document.documentElement.scrollTop;
       for(let i = 0; i < aimge.length;i++){
           let top = aimge[i].offsetTop;
           if(top <= height+scroTop){
               aimge[i].src = aimge[i].getAttribute('_src');
           }
       }
   }

当页面刚开始向下滚动时，在可视区以下的图片并没有加载出来，当滚动距离+可视区的高度大于已经显示图片的高度时，就开始加载下面的图片资源。