js處理圖片懶加載

• 懶加載的難點在於肯定某張圖片是不是用戶須要的資源，在瀏覽器中，用戶須要的是可視區內的資源，所以咱們只須要判斷圖片是否已經呈如今可視區內，當圖片呈如今可視區內時，獲取圖片的真實地址並賦給該圖片便可(圖片寬高須要指定，能夠利用padding處理)。
• 判斷是否存在於可視區   
• 瀏覽器視口高度  (document.documentElement.clientHeight）
• 待加載資源距離視口頂端位置
• 經過以上兩點便可判斷圖片是否位於可視區內。
• 以後獲取圖片的真實地址
• 把真實地址賦給圖片

源代碼以下：

if(window.addEventListener){
  document.write('add')
  window.addEventListener('scroll',lazyload);
}else {
  window.attachEvent('onscroll',lazyload);
}

/*
 * params 
 * ele: class || id
 */
 imgLazy("#page")
function imgLazy(ele) {
  let scrollElement = document.querySelector(ele);
  lazyload()
}

function lazyload(){
  let viewH = document.documentElement.clientHeight;
  let nodes = document.querySelectorAll('img[data-src]');
  Array.from(nodes).forEach((item,index) => {
    if(item.dataset.src==='') return;
    let rect = item.getBoundingClientRect();
    if(rect.bottom>=0 && rect.top < viewH){
          let img = new Image();
          img.onload = function(){
            item.src = img.src;
          }
          img.src = item.dataset.src
          item.dataset.src = ''
    }
  })
}