详解用JS实现页面懒加载

懒加载（Lazy Loading），也称为延迟加载，是一种技术，它可以先加载当前页面可视区域的内容，当用户滚动到页面的其他部分时再去加载其他部分的内容，从而减轻页面加载压力，提高页面性能和用户体验。下面是用 JavaScript 实现懒加载的代码：

HTML 代码：

<div class="container">
  <img data-src="image1.jpg" class="lazy">
  <img data-src="image2.jpg" class="lazy">
  <img data-src="image3.jpg" class="lazy">
  <img data-src="image4.jpg" class="lazy">
  <img data-src="image5.jpg" class="lazy">
  <img data-src="image6.jpg" class="lazy">
</div>

JavaScript 代码：

window.addEventListener('DOMContentLoaded', function() {

  let images = document.querySelectorAll('.lazy');

  function lazyLoad() {
    images.forEach(image => {
      if (image.offsetTop < window.innerHeight + window.pageYOffset && !image.src) {
        image.src = image.dataset.src;
      }
    });
  }

  window.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
  window.addEventListener('orientationchange', lazyLoad);

  lazyLoad();

});

在上面的示例中，我们首先获取了所有带有 lazy 类的图像元素，然后定义了一个函数 lazyLoad()，这个函数遍历了图片元素，如果图片元素的顶部距离小于当前可视区域的高度加上滚动距离，并且图片元素还没有加载过，那么就将图片元素的 data-src 属性赋值给它的 src 属性，实现了懒加载的效果。

最后，我们给 window 对象添加了三个事件监听器：scroll、resize 和 orientationchange。这几个事件监听器都会触发 lazyLoad() 函数，以便在滚动、调整大小或旋转设备时及时加载图片。