iframe 延迟加载
使用 loading=lazy 推迟屏幕外 iframe 的加载
iframe 延迟加载 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
什么是延迟加载
延迟加载会推迟资源的加载，直到资源即将被需要时才加载，也就是元素接近或进入视口时。对于内嵌框架，这意味着嵌入的文档、其中的脚本、CSS 和资源不会下载，直到用户滚动到内嵌框架附近。
loading 属性
请为内嵌框架添加 loading="lazy"：<iframe src="embed.html" loading="lazy">。浏览器会根据自身的启发式规则决定何时开始加载，通常是在内嵌框架进入视口前 1000 至 2500 像素。无需使用 JavaScript。
性能影响
内嵌框架可能会加载大量资源（YouTube 会加载约 500KB 的 JavaScript）。对首屏以下的视频嵌入内容进行延迟加载，可以准确减少这部分初始页面加载量，从而直接改善首屏内容最大绘制（LCP）以及首屏可交互时间。
loading="eager"
loading="eager" 会立即加载内嵌框架，不论其所在位置。这是默认行为。在默认采用延迟加载的环境中（例如会全局添加延迟加载的框架），如果某个特定内嵌框架必须立即加载，显式添加 eager 会很有用。
IntersectionObserver 替代方案
对于复杂的延迟加载逻辑（例如点击时加载、根据连接质量加载），请使用 IntersectionObserver：观察内嵌框架容器，仅在它进入视口时设置 src。这样可以完全控制内嵌框架何时加载，以及是否加载。
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting) {
iframe.src = iframe.dataset.src;
observer.disconnect();
}
});
observer.observe(iframe);外观占位模式
默认显示静态缩略图，而不是内嵌框架。请在缩略图上叠加播放按钮。点击后，将缩略图替换为真实的内嵌框架。YouTube 外观占位模式的做法是：显示视频缩略图，仅在用户点击播放时加载内嵌框架，从而节省完整 YouTube 嵌入内容的加载开销。
点击加载模式
对于会加载大量 JavaScript 的社交嵌入内容（Twitter 时间线、Instagram 帖子），请显示“加载评论”按钮。点击后再注入内嵌框架。不进行交互的用户无需承担加载开销。这是对嵌入式社交内容进行渐进增强的一种方式。
浏览器支持
Chrome 77 及更高版本和 Firefox 121 及更高版本支持内嵌框架的 loading="lazy"。截至 2024 年，Safari 不支持内嵌框架的延迟加载。要实现跨浏览器的延迟加载，请使用 IntersectionObserver 作为可靠的备用方案，它适用于所有现代浏览器。
防止 CLS
请使用明确的宽度、高度和宽高比 CSS，为延迟加载的内嵌框架预留空间，以防止累积布局偏移（CLS）。当内嵌框架加载并变为可见时，空间已经分配完成，周围内容无需移动来容纳它。
分析跟踪
延迟加载的内嵌框架可能会影响分析：如果跟踪像素或分析嵌入内容使用延迟加载，那么对于未滚动到该内嵌框架的用户，它可能不会执行。请确保关键的分析和转化跟踪内嵌框架立即加载，或将其放在首屏内。
结合使用延迟加载和沙箱
请同时使用延迟加载和沙箱：<iframe src="embed.html" loading="lazy" sandbox="allow-scripts">。这两个属性彼此独立：延迟加载控制加载时机，沙箱控制内嵌框架可以执行的操作。将两者结合起来，可以高效且安全地嵌入第三方内容。
知识检查
什么是用于内嵌框架延迟加载的外观模式？
总结
使用 loading="lazy" 延迟加载内嵌框架，会将资源加载推迟到接近视口时——对于包含大型嵌入内容的页面，这能显著减轻初始加载负担。外观模式和点击加载还能进一步延迟加载，只有在用户交互时才加载内嵌框架。IntersectionObserver 为复杂的延迟加载场景提供跨浏览器控制。预留内嵌框架的尺寸，以防止 CLS。
常见问题解答
「iframe 延迟加载」课时是免费的吗？
是的 — 「iframe 延迟加载」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「iframe 延迟加载」这节课中我会学到什么？
使用 loading=lazy 推迟屏幕外 iframe 的加载 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「iframe 延迟加载」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。