JavaScript 图片懒加载入门教程（附代码示例）

做JavaScript开发这几年，图片懒加载是被身边同事问得最多的问题之一。今天把答案整理出来，供大家参考。

问题一：图片懒加载 应该从哪里入手？

注意图片懒加载在边界条件下的表现，例如空数据、超长数据等特殊情况。

先理解图片懒加载的基本概念和适用场景，再动手写代码，避免边写边猜。

问题二：有没有可以直接参考的 图片懒加载 示例？

IntersectionObserver 图片懒加载，代码如下：

const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      io.unobserve(e.target);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));

问题三：使用 图片懒加载 时容易踩哪些坑？

• 定时任务要加日志并定期巡检，很多任务失败了却长时间无人发现。
• 关键位置加上日志输出，出现问题时可以根据日志快速还原现场。

如果你在阅读过程中发现任何错误，欢迎指正。技术内容需要不断打磨，感谢你的支持。

遇见问题加 QQ23979811 协助处理