JavaScript 如何实现图片懒加载

快速答案

用 IntersectionObserver 观察图片进入视口后再设置 src。

js

const observer = new IntersectionObserver(entries => {
  for (const entry of entries) if (entry.isIntersecting) {
    entry.target.src = entry.target.dataset.src;
    observer.unobserve(entry.target);
  }
});

使用要点

把用户输入用于选择器、正则或 HTML 前要先转义。
DOM 示例默认在浏览器中执行，放进框架组件时要等元素渲染完成。

相关内容