JS实现图片懒加载

思路

1. 首先让图片的 src 属性引用一张低像素的图片，并配合 css3 中的 filter 属性设置一个模糊效果
2. 将需要加载的高清图的地址用自定义的属性(data-src)保存下来
3. 在图片进入用户视觉前将 src 引用地址替换为 data-src 中的地址，并移除模糊效果

代码

const images = document.querySelector("img[data-src]");

const loadImg = (entries, observer) => {
  const [entry] = entries;
  if (!entry.isIntersecting) return;
  // 用高保真图片替换占位图
  entry.target.src = entry.target.dataset.src;
  // 图片加载会触发 load 事件，监听这个事件并在其回调中移除模糊效果
  entry.target.addEventListener("load", () => {
    entry.target.classList.remove("filter-img");
  });
  // 最后解除对目标图片的观察，以免导致性能问题，因为 observer 被移除了，所以load事件同样会被消除
  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '200px', // 这个值为正代表目标 section 出现在 viewpoint 前的距离触发 observer，为负则代表出现在viewpoint之后的距离触发
});

images.forEach((img) => imgObserver(img));