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 = ''
    }
  })
}