JavaScript Academy · 课时

图片懒加载

Q: 「图片懒加载」这节课中我会学到什么？

仅在图片出现时加载它们。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

仅在图片出现时加载它们。

图片懒加载 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

延迟加载的原理

延迟加载会推迟图片的下载，直到图片即将滚动进入视口。这样可以节省带宽并加快初始页面加载速度，尤其适用于内容较长且图片较多的页面。

存储真实 URL

关键做法是：一开始不要将真实图片 URL 放入 src。将它存储在 data-src 属性中，这样浏览器暂时不会下载图片。

// Markup pattern:
// <img data-src="photo-large.jpg" alt="Scenery">
// The browser will not fetch anything until we set src.

选择延迟加载的图片

收集所有需要延迟加载的图片。常见做法是为它们使用同一个 class，或者检查它们是否存在 data-src。

const lazyImages = document.querySelectorAll('img[data-src]');
console.log('found', lazyImages.length, 'lazy images');

创建 observer

创建一个 observer，并让它的回调在图片发生相交后加载真实图片。使用 rootMargin，让图片在即将出现之前就开始加载。

const observer = new IntersectionObserver((entries, obs) => {
  // handle entries here
}, { rootMargin: '100px' });

相交时加载

当图片发生相交时，将它的 data-src 复制到 src。随后浏览器会下载并显示图片。

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // triggers the download
    }
  });
}, { rootMargin: '100px' });

加载后取消观察

图片加载完成后就不需要继续观察了。调用 unobserve 可以释放资源，并防止再次触发。

if (entry.isIntersecting) {
  const img = entry.target;
  img.src = img.dataset.src;
  obs.unobserve(img); // done watching this one
}

开始观察

遍历每一张延迟加载的图片并开始观察。用户滚动时，observer 会处理其余工作。

lazyImages.forEach(img => observer.observe(img));

显示占位图

在真实图片加载期间，显示一个小型模糊占位图或纯色背景，可以带来更流畅的体验；然后在图片的 load 事件触发时将真实图片淡入显示。

img.addEventListener('load', () => {
  img.classList.add('loaded'); // CSS can fade it in
});
img.src = img.dataset.src;

原生 loading 属性

现代浏览器还支持原生延迟加载：在 img 和 iframe 上使用 loading="lazy" 即可。对于自定义控制、动画或备用行为，Intersection Observer 仍然很有用。

// Native approach (no JS needed):
// <img src="photo.jpg" loading="lazy" alt="...">

// Observer approach gives more control and effects.

清理 data-src

加载完成后，您可以移除 data-src 属性，使 DOM 保持整洁，并避免后续代码或查询产生混淆。

img.src = img.dataset.src;
img.removeAttribute('data-src');
obs.unobserve(img);

完整模式

使用 Intersection Observer 实现延迟加载是一种简洁高效的模式：将 URL 存储在 data-src 中，观察每张图片，在发生相交时替换为真实 URL，然后取消观察。这样可以让页面加载更快，并在恰当的时机加载图片。

快速检查

测试您对图片延迟加载的理解。

回顾

您实现了图片延迟加载：

将真实 URL 存储在 data-src 中。
使用 Intersection Observer 观察每张图片。
发生相交时，将 data-src 复制到 src，然后调用 unobserve。
使用 rootMargin，在图片进入视口前预先加载。
原生的 loading="lazy" 是一种更简单的替代方案。

接下来，我们将实现无限滚动。

常见问题解答

「图片懒加载」课时是免费的吗？

是的 — 「图片懒加载」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「图片懒加载」这节课中我会学到什么？

仅在图片出现时加载它们。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「图片懒加载」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy