用js写一个懒加载

在 JavaScript 中实现懒加载可以使用 IntersectionObserver API。这是一个用于观察目标元素与可视区域或指定的容器元素的交叉状态的接口。

以下是使用 IntersectionObserver 实现懒加载的简单示例：

// 创建一个观察者实例
const observer = new IntersectionObserver(entries => {
  // 遍历所有被观察的元素
  entries.forEach(entry => {
    // 当被观察元素进入可视区域时，将其 src 属性替换为 data-src 属性的值
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

// 将所有带有 data-src 属性的图像元素添加到观察者中
const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
  observer.observe(img);
});

在上面的示例中，我们创建了一个观察者实例，并在回调函数中遍历所有被观察的元素。如果被观察元素进入了可视区域，就将其 src 属性替换为 data-src 属性的值，然后调用 unobserve() 方法来停止观察该元素。最后，我们选择所有带有 data-src 属性的图像元素，并将它们添加到观察者中。

注意：这个示例只是一个简单的懒加载实现，实际应用中可能需