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));

第三步：验证与调优

• 遇到诡异问题试试最小化复现：把无关代码都删掉，问题往往立刻现形。
• 修改配置后记得重启或重载服务，很多人调半天发现是配置没生效。
• 中文乱码问题十有八九和编码有关，统一使用 UTF-8 能避开大部分坑。

写在最后

关于图片懒加载就写到这里。如果文中有讲得不清楚的地方，欢迎指出，我会及时补充完善。

遇见问题加 QQ23979811 协助处理