懶加載實現

懶加載：（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);
     }