【图片懒加载】滚动加载图片的实现方法

基本思路

1. 页面的每个 img 标签的 src 属性都设置为一张 loading 图片；
2. 接着为 img 加一个 data-src 属性装图片的真正地址，再加一个 data-isloaded 属性来标记 src 是否以被 data-src 给替换过；
3. 为 window 添加 scroll 监听事件，判断图片是否已被替换，如果还没被替换，则判断是否在视野内，如果可见，则把 src 的地址替换为 data-src 的地址，并把替换标记 isloaded 设为 true;

具体代码：

//添加窗口scroll监听事件
window.addEventListener('scroll', function() {
  lazyLoadImages();
});

/**
 * 判断图片是否已被加载过，如果已经是则不做处理，
 * 如果没有，则判断是否在视野，如果在，则把src的地址替换
 * 为data-src的地址，并设置已加载标志。
 */
function lazyLoadImages() {
  let imgs = document.querySelectorAll("img");
  for(let img of imgs) {
    if(!img.dataset.isloaded && isVisible(img)) {
      //为了测试方便，加个随机数阻止图片缓存，实际情况不必加
      img.src = img.dataset.src + "&nocache=" + Math.random(); 
      //标记为已加载 true
      img.dataset.isloaded = true;
    }
  }
}

/**
 * 判断图片是否可见
 * elem.getBoundingClientRect().top 是图片距离窗口顶端的距离
 * document.documentElement.clientHeight 窗口的高度
 * 另外，如果你想在距离可见距离小于100px时做预加载，那么在clientHeight的基础上加上100即可
 */
function isVisible(elem) {
  return elem.getBoundingClientRect().top < document.documentElement.clientHeight;
}

//替换一开始就出现在窗口的图片
lazyLoadImages();