CSS如何实现图片懒加载

图片懒加载是一种优化网页性能的技术，它通过延迟加载页面上不在视口（viewport）内的图片，从而减少初始页面加载时间和节省带宽。在CSS中，懒加载通常需要结合HTML和JavaScript来实现，因为CSS本身并没有直接的方法来检测图片是否在视口中。

以下是一个简单的实现图片懒加载的方法：

1. HTML结构：

<img class="lazy" data-src="path/to/image.jpg" alt="描述文字">

在这里，我们使用data-src属性来存储图片的真实路径，而不是直接在src属性中设置。这样可以防止浏览器在页面加载时就立即加载图片。

2. CSS样式：

.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}

.lazy.loaded {
  opacity: 1;
}

我们可以通过CSS过渡效果来逐渐显示图片，当图片加载完成后，给图片添加一个loaded类。

3. JavaScript代码：

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.add("loaded");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // 对于不支持IntersectionObserver的浏览器，可以使用其他方法，例如滚动事件监听
    // ...
  }
});

这段JavaScript代码使用了IntersectionObserver API来检测图片是否进入视口。当图片进入视口时，它会将data-src属性的值赋给src属性，从而触发图片加载，并添加loaded类来显示图片。

请注意，IntersectionObserver是一个现代浏览器特性，如果需要支持旧版浏览器，你可能需要使用polyfill或者回退到其他方法，比如监听滚动事件来检查图片是否即将进入视口。

这只是一个基本的实现示例，实际应用中可能需要考虑更多的因素，比如图片占位符、错误处理、滚动性能优化等。