JS实现图片懒加载

1. 遍历需要进行懒加载的图片元素，给每个元素添加一个 data-src 属性，属性的值为图片的真实地址；
2. 给窗口对象绑定一个 scroll 事件，每次滚动时检查页面中是否有需要进行懒加载的图片元素进入了可视区域；
3. 如果图片元素进入了可视区域，将 data-src 属性的值赋给元素的 src 属性，并移除 data-src 属性，图片就会开始加载。

// 获取需要进行懒加载的图片元素
const lazyImages = document.querySelectorAll('img.lazy');

// 监听窗口滚动事件
window.addEventListener('scroll', function() {
  // 可视区域的高度
  let viewHeight = document.documentElement.clientHeight;
  // 滚动条滚出去的高度
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 遍历需要进行懒加载的图片元素
  lazyImages.forEach(function(img) {
    // 如果图片元素进入了可视区域（图片距离文档顶部的距离<滚动条故出去的高度+可视区域的高度）就进行懒加载了
    if (img.offsetTop < viewHeight + scrollTop) {
      // 将 data-src 属性的值赋给元素的 src 属性
      img.src = img.dataset.src;
      // 移除 data-src 属性
      img.removeAttribute('data-src');
    }
  });
});