懒加载实现

懒加载：（1）图片进入可视区域之后请求资源，对于电商，页面很长的场景，减少无效的资源加载（单页应用，观看的时候才去加载），（2）并发加载的资源过多会影响网站的正常使用。

具体实现懒加载：图片的src的地址被改变的时候被加载。监听滑动的事件，当图片进入可视区域的时候才去加载。

  window.onload = function (ev) {

         let viewheight = document.documentElement.clientWidth;
         function  lazyload() {
             //实现懒加载
          let allNode = document.querySelectorAll("img[lazyload][data-origin]");

          //进行遍历
             Array.from(allNode).forEach((item,index)=>{
                   let react;
                   console.log(item.dataset)
                   if(item.dataset.origin === "")
                   {
                       return ;
                   }
                  react = item.getBoundingClientRect();
                  if(react.bottom >=0 && react.top<viewheight){
                      //到达可视区域
                      //给图片提供地址
                      let img = new Image();
                      img.src  = item.dataset.origin;
                      img.onload = ()=>{
                         item.src = img.src;
                      }
                      item.removeAttribute("data-origin");
                      item.removeAttribute("lazyload");
                  }

             })


         }
         lazyload();//上来先调用一下
         //绑定事件
         document.addEventListener("scroll",lazyload);
     }