CSS3如何实现图片懒加载

在CSS3中，没有直接的方法来实现图片懒加载。但是，你可以使用JavaScript（或者jQuery）与CSS3结合来实现这个功能。下面是一个简单的实现方法：

1. 首先，在HTML中为图片添加一个占位符，例如一个小的低分辨率图片或者一个加载动画。

<img class="lazy-image" data-src="path/to/high-resolution-image.jpg" src="path/to/placeholder-image.jpg" alt="Description">

这里，我们使用data-src属性来存储高分辨率图片的路径，而src属性指向一个占位符图片。

2. 接下来，编写CSS样式。为懒加载图片添加一个渐显效果，当图片加载完成时，渐显效果会消失。

.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy-image.loaded {
  opacity: 1;
}

3. 最后，使用JavaScript（或jQuery）来实现懒加载功能。当用户滚动到图片附近时，将data-src属性的值赋给src属性，然后为图片添加loaded类，以触发渐显效果。

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = document.querySelectorAll(".lazy-image");

  function lazyLoad() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && getComputedStyle(img).display !== "none") {
        img.src = img.getAttribute("data-src");
        img.classList.add("loaded");
        img.removeAttribute("data-src");
      }
    });
  }

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

  lazyLoad(); // 初始加载时检查一次
});

这个示例中，我们为window对象添加了scroll、resize和orientationchange事件监听器，以便在用户滚动、调整窗口大小或改变设备方向时触发懒加载功能。当页面加载完成时，也会执行一次lazyLoad函数，以确保初始状态下可见的图片能够正确加载。

现在，当用户滚动到图片附近时，占位符图片将被高分辨率图片替换，并带有渐显效果。