图片懒加载实现方法

图片懒加载是一种优化网页加载速度的方法，它可以延迟加载页面上的图片，只在图片进入可视区域时才加载，可以节约带宽和提升用户体验。下面是一个简单的图片懒加载实现方法的例子：

HTML部分：

<img class="lazy" data-src="image.jpg" width="200" height="200">

CSS部分：

.lazy {
  opacity: 0; /* 隐藏图片 */
  transition: opacity 0.3s;
}

.lazy.loaded {
  opacity: 1; /* 显示图片 */
}

JavaScript部分：

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

  function lazyLoad() {
    lazyImages.forEach(function(image) {
      if (image.getBoundingClientRect().top <= window.innerHeight && image.getBoundingClientRect().bottom >= 0 && getComputedStyle(image).display !== "none") {
        image.src = image.dataset.src;
        image.classList.add("loaded");
        lazyImages = lazyImages.filter(function(img) {
          return img !== image;
        });

        if (lazyImages.length === 0) {
          document.removeEventListener("scroll", lazyLoad);
          window.removeEventListener("resize", lazyLoad);
          window.removeEventListener("orientationchange", lazyLoad);
        }
      }
    });
  }

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

以上代码使用了Intersection Observer API的polyfill作为懒加载的实现方式，当图片进入可视区域时，将图片的data-src属性赋值给src属性，同时添加一个loaded类来显示图片。

需要注意的是，如果浏览器不支持Intersection Observer API，可以使用polyfill来提供兼容性。