html 页面懒加载图片

懒加载（Lazy Loading）是一种网页优化技术，可以在用户滚动到页面上时再加载图片，而不是在页面加载时就将所有图片加载完毕。这样可以加快页面加载速度，提高用户体验。

实现懒加载图片的方法是使用 JavaScript 监听滚动事件，当用户滚动到图片所在位置时，将图片的 src 属性设置为图片的真实地址。下面是一个示例代码：

<img data-src="image.jpg" />

<script>
  window.addEventListener('scroll', function() {
    var images = document.querySelectorAll('img[data-src]');
    for (var i = 0; i < images.length; i++) {
      var image = images[i];
      if (image.getBoundingClientRect().top < window.innerHeight) {
        image.src = image.dataset.src;
        image.removeAttribute('data-src');
      }
    }
  });
</script>

在上面的代码中，我们先为图片添加一个 data-src 属性，用于保存真实的图片地址。然后使用 JavaScript 监听滚动事件，在用户滚动到图片所在位置时将图片的 src 属性设置为 data-src，并且移除 data-src 属性，以避免重复加载。