js observe图片懒加载

图片懒加载是一种优化网页性能的技术，通过延迟加载图片，减少初始加载时的网络请求和页面渲染时间。在 JavaScript 中，可以使用 `IntersectionObserver` 来实现图片懒加载。

下面是一个使用 `IntersectionObserver` 监听图片是否进入视口的示例代码：

// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 将 data-src 属性值赋给 src 属性，触发图片加载
      observer.unobserve(img); // 停止监听该图片
    }
  });
});

// 获取需要懒加载的图片元素，并添加到 IntersectionObserver 监听中
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(image => {
  observer.observe(image);
});

在 HTML 中，需要将需要懒加载的图片的 `src` 属性设置为占位符，实际的图片地址存放在 `data-src` 属性中：

<img class="lazy" src="placeholder.jpg" data-src="image.jpg">

当图片进入可视区域时，通过将 `data-src` 的值赋给 `src` 属性，触发图片加载。

这样，当页面滚动到图片位置时，图片才会被加载，从而减少了初始页面的加载时间和带宽消耗。

注意：以上代码仅为示例，实际使用时可能需要根据具体需求进行适当的修改和扩展。