CSS实现图片延迟加载的技巧

要实现图片的延迟加载，可以使用以下几种CSS技巧：

1. 使用loading属性：

在HTML中，为<img>标签添加loading="lazy"属性，可以实现图片的延迟加载。

<img src="example.jpg" alt="Example Image" loading="lazy" />

这种方法是原生的，但是需要注意的是，loading属性目前并非所有浏览器都支持。

2. 使用scroll事件和IntersectionObserver：

通过监听滚动事件和使用IntersectionObserver，可以在图片进入视口时加载图片。

在HTML中为图片添加一个特定的类，并设置data-src属性存储图片的URL。

<img class="lazy-load" data-src="example.jpg" alt="Example Image" />

接下来，在CSS中设置默认图片，当图片加载时，将显示默认图片。

.lazy-load {
  display: block;
  width: 100%;
  height: auto;
  background-color: #eee;
}

在JavaScript中编写代码，监听滚动事件和使用IntersectionObserver来实现图片的延迟加载。

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

  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.remove("lazy-load");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function (lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback for browsers that don't support IntersectionObserver
    // Here you can include a polyfill or a different lazy loading logic
  }
});

这种方法可以兼容更多的浏览器，但需要编写额外的JavaScript代码。