可以使用IntersectionObserver对象来实现图片的懒加载，它可以在元素与视口交叉处异步触发回调函数。当图片占位符进入视口时，再加载真实图片，从而减少了不必要的请求和加载时间。

示例代码：

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.intersectionRatio > 0) {
      // 加载真实图片
      const img = entry.target;
      const src = img.getAttribute('data-src');
      img.setAttribute('src', src);
      observer.unobserve(img);
    }
  });
});

const imgs = document.querySelectorAll('img[data-src]');
imgs.forEach((img) => {
  observer.observe(img);
});