HTML中如何实现延迟加载

延迟加载通过推迟非关键资源加载提升性能，主要采用html的loading="lazy"属性或JavaScript的Intersection Observer API。前者适用于图片和iframe，实现简单且由浏览器原生支持；后者可精细控制加载时机，支持背景图、视频等更多元素类型。核心优势包括加快首屏加载、节约带宽、改善用户体验及SEO。需注意设置宽高防止布局偏移、避免首屏关键资源延迟、提供占位符与JS失效回退方案，并结合响应式图片优化。兼容性不足时可使用Polyfill或降级处理。

HTML中实现延迟加载主要通过

loading="lazy"

属性，或者利用JavaScript的Intersection Observer API来判断元素是否进入视口，从而动态加载图片、iframe等资源，显著提升页面加载速度和用户体验。

解决方案

延迟加载（Lazy Loading）的核心理念是，将非关键资源（如位于视口外的图片、视频、iframe等）的加载推迟到它们即将进入或已经进入用户视口时才进行。这能有效减少页面首次加载时的资源请求和数据量，从而加快页面渲染速度，提升用户体验，尤其是在移动设备或网络条件不佳的情况下。

1. 使用HTML原生

loading="lazy"

属性

立即学习“前端免费学习笔记（深入）”；

这是最简单、最推荐的方式，因为它无需JavaScript，由浏览器原生支持。你只需要在

<img>

和

<iframe>

标签上添加

loading="lazy"

属性即可。

<!-- 图片延迟加载 --> <img src="placeholder.png"  alt="描述" loading="lazy" width="800" height="600">  <!-- iframe延迟加载 --> <iframe src="about:blank"  loading="lazy" width="560" height="315" frameborder="0" allowfullscreen></iframe>

• 工作原理： 浏览器会自动检测带有

  loading="lazy"

  属性的元素，并根据其在视口中的位置决定何时加载。通常，当元素距离视口还有一定距离时，浏览器就会开始预加载。

• 优点：
  • 原生支持： 无需额外JavaScript代码，实现简单。
  • 性能优化： 浏览器可以更好地优化加载策略。
  • 易于维护： 代码简洁明了。
• 缺点：
  • 浏览器兼容性： 并非所有浏览器都完全支持（可以通过Can I Use查询）。对于不支持的浏览器，元素会按照默认行为立即加载。
  • 仅限于

    <img>

    和

    <iframe>

    ： 无法用于背景图片、

    <video>

    或其他自定义组件的延迟加载。

2. 使用JavaScript的Intersection Observer API

当需要更精细的控制、支持更多元素类型或需要兼容性更好的方案时，Intersection Observer API是一个强大的工具。它允许你异步观察目标元素与祖先元素或文档视口之间的交叉状态变化。

<!-- HTML 结构示例 --> <img class="lazy-load" src="placeholder.png"  alt="描述" width="800" height="600"> <div class="lazy-load-bg" data-bg-src="background-image.jpg" style="min-height: 300px;"></div> <video class="lazy-load-video" controls  width="640" height="360">     <source src="placeholder.mp4" type="video/mp4"> </video>  <script>     document.addEventListener("domContentLoaded", function() {         const lazyLoadElements = document.querySelectorAll('.lazy-load, .lazy-load-bg, .lazy-load-video');          if ("IntersectionObserver" in window) {             let lazyObserver = new IntersectionObserver(function(entries, observer) {                 entries.forEach(function(entry) {                     if (entry.isIntersecting) {                         const target = entry.target;                          // 图片                         if (target.tagName === 'IMG' && target.dataset.src) {                             target.src = target.dataset.src;                             // 如果有srcset，也处理                             if (target.dataset.srcset) {                                 target.srcset = target.dataset.srcset;                             }                         }                          // 背景图片                         else if (target.classList.contains('lazy-load-bg') && target.dataset.bgSrc) {                             target.style.backgroundImage = `url(${target.dataset.bgSrc})`;                         }                         // 视频                         else if (target.tagName === 'VIDEO' && target.dataset.src) {                             // 移除placeholder source，添加实际source                             const sourceElement = document.createElement('source');                             sourceElement.src = target.dataset.src;                             sourceElement.type = 'video/mp4'; // 根据实际视频类型调整                             target.appendChild(sourceElement);                             target.load(); // 重新加载视频                         }                          observer.unobserve(target); // 一旦加载，停止观察                     }                 });             }, {                 rootMargin: "0px 0px 100px 0px" // 在元素进入视口前100px开始加载             });              lazyLoadElements.forEach(function(element) {                 lazyObserver.observe(element);             });         } else {             // Fallback for browsers that don't support Intersection Observer             // 可以直接加载所有资源，或者使用更传统的scroll/resize事件监听（不推荐，性能差）             lazyLoadElements.forEach(function(element) {                 if (element.tagName === 'IMG' && element.dataset.src) {                     element.src = element.dataset.src;                 } else if (element.classList.contains('lazy-load-bg') && element.dataset.bgSrc) {                     element.style.backgroundImage = `url(${element.dataset.bgSrc})`;                 } else if (element.tagName === 'VIDEO' && element.dataset.src) {                     const sourceElement = document.createElement('source');                     sourceElement.src = element.dataset.src;                     sourceElement.type = 'video/mp4';                     element.appendChild(sourceElement);                     element.load();                 }             });         }     }); </script>

• 工作原理：
  • 为需要延迟加载的元素设置一个占位符（如

    <img>

    的

    src

    指向一个空白图片或低质量图片，真实地址放在

    data-src

    属性中）。

  • 创建一个

    IntersectionObserver

    实例，并定义一个回调函数。

  • 当被观察的元素与视口（或指定的

    root

    元素）发生交叉时，回调函数会被触发。

  • 在回调函数中，检查

    entry.isIntersecting

    是否为

    true

    ，如果是，就将

    data-src

    中的真实地址赋值给

    src

    （或

    style.backgroundImage

    等），然后调用

    observer.unobserve(target)

    停止观察该元素。

• 优点：
  • 高度可控： 可以对加载时机、加载内容进行精细控制。
  • 支持多种元素： 不仅限于图片和iframe，任何DOM元素都可以。
  • 性能优异： 异步非阻塞，不会影响主线程性能。
  • 兼容性好： 现代浏览器支持良好，有Polyfill方案。
• 缺点：
  • 需要JavaScript： 如果JavaScript被禁用或加载失败，延迟加载将失效。
  • 代码量增加： 相对于原生属性，需要编写更多代码。

为什么我们需要延迟加载？它能带来哪些实际好处？

说实话，我个人在开发中，对页面加载速度的执念挺深的。想象一下，你打开一个电商网站，或者一个新闻聚合页，如果图片刷刷刷地跳出来，文字内容也很快呈现，那种感觉是很流畅的。但如果页面半天白屏，或者图片一张张缓慢地加载，甚至导致页面布局跳动，那种糟糕的用户体验简直能让人直接关掉页面。这就是为什么延迟加载（Lazy Loading）成了现代Web开发中几乎不可或缺的一环。

它带来的好处是实实在在的：

• 显著提升初始页面加载速度： 这是最核心的价值。当用户访问一个页面时，浏览器不再需要立即下载所有图片、视频或iframe。它只加载视口内的内容，大大减少了首次请求的资源数量和网络带宽消耗。这对于移动设备用户，或者网络条件不佳的用户来说，体验提升是巨大的。
• 节约带宽和流量： 对于那些可能永远不会滚动到页面底部的用户，未进入视口的资源根本就不会被加载。这意味着服务器和用户都节省了宝贵的带宽，尤其是在按流量计费的移动数据套餐下，这能帮用户省钱。
• 改善用户体验（ux）： 页面加载更快，用户就能更快地看到内容，减少等待时间。同时，通过合理设置占位符（placeholder），可以避免内容突然出现造成的布局跳动（Cumulative Layout Shift, CLS），让视觉体验更平滑。
• 间接优化SEO： 虽然延迟加载本身不是一个直接的SEO排名因素，但页面加载速度是。搜索引擎，尤其是google，已经明确表示页面加载速度会影响排名。更快的页面加载速度意味着更好的用户体验，从而可能带来更低的跳出率和更高的用户参与度，这些都是对SEO有益的信号。而且，Googlebot现在能够更好地处理JavaScript渲染的内容，因此延迟加载的资源也能被正常抓取。
• 降低服务器负载： 减少了不必要的资源请求，服务器的压力也会相应减轻。这对于高流量网站来说，可以节省服务器资源成本。

从我的经验来看，尤其是在处理大量图片或复杂组件的页面时，不使用延迟加载几乎是不可想象的。它不是一个“锦上添花”的功能，而是现代Web性能优化的“基石”之一。

loading="lazy"

属性真的足够吗？何时应该考虑使用JavaScript方案？

loading="lazy"

属性无疑是实现延迟加载最简单、最高效的方式，对于大多数场景下的图片和iframe来说，它确实足够了。它的优势在于原生、无需JavaScript、性能由浏览器底层优化。但要说它“真的足够”，那可能就有点一概而论了，因为现实世界的Web环境总是复杂多变的。

以下情况，你可能就需要考虑JavaScript方案，或者至少将其作为补充：

1. 浏览器兼容性要求高： 虽然

   loading="lazy"

   的兼容性正在变得越来越好，但总有一些旧版本浏览器或者特定浏览器可能不支持。如果你需要支持这些浏览器，并且延迟加载是你的核心需求，那么JavaScript（尤其是Intersection Observer API）就是一个更稳妥的选择，因为它可以通过Polyfill来扩展兼容性。

2. 延迟加载非

   <img>

   和

   <iframe>

   元素： 这是

   loading="lazy"

   最明显的局限性。如果你想延迟加载：

   • 背景图片（css background-image）： 比如一个大型的CSS背景图，或者通过CSS控制的图片。

   • <video>

     元素： 视频内容通常比图片更大，延迟加载能带来显著的性能提升。

   • 自定义组件或模块： 比如一个复杂的评论区、地图组件、广告位，它们可能包含大量DOM元素和JS逻辑，只有当用户滚动到它们附近时才去加载和初始化。
   • 动态加载的脚本或样式表： 某些非关键的JS/CSS文件也可以考虑延迟加载。 这种情况下，JavaScript方案是唯一的选择。
3. 需要更精细的控制逻辑： 原生

   loading="lazy"

   的行为是由浏览器决定的，你无法干预其加载时机（比如距离视口多远开始加载）。而JavaScript方案，特别是Intersection Observer API，允许你自定义

   rootMargin

   参数，从而精确控制元素在距离视口多远时开始加载。这对于一些特殊的布局或者用户体验需求来说，非常有用。比如，你可能希望图片在进入视口前200px就开始加载，以确保用户滚动到时已经可见。

4. 作为

   loading="lazy"

   的优雅降级或补充： 一个健壮的延迟加载策略，往往会结合两者。优先使用

   loading="lazy"

   ，对于不支持的浏览器，或者需要延迟加载非图片/iframe的元素，则通过JavaScript进行补充。这样既能享受到原生方案的简洁高效，又能兼顾兼容性和灵活性。

所以，我的看法是，

loading="lazy"

是你的第一选择，但绝不是唯一的选择。在实际项目中，我通常会先尝试使用原生属性，如果遇到上述的限制或需求，再转向或结合JavaScript方案。这是一种渐进增强的思路，既保证了效率，又兼顾了鲁棒性。

实现延迟加载时，有哪些常见的“坑”和优化策略？

在实际操作延迟加载时，我遇到过不少“坑”，也总结了一些优化策略。这东西看着简单，但要做到既有效又不出问题，还是有些细节需要注意的。

常见的“坑”：

1. 布局偏移（Cumulative Layout Shift, CLS）： 这是最常见的，也是最让人头疼的问题之一。如果你的延迟加载图片或iframe没有明确的

   width

   和

   height

   属性，或者没有通过CSS预留好空间，那么当这些元素加载进来时，页面内容就会发生跳动，导致用户体验非常糟糕。Google Core Web Vitals里，CLS是一个重要的指标。

   • 例子： 页面加载时，图片区域是空的，内容紧凑。图片加载后，突然撑开一个大空间，下面的文字被挤下去。
2. 首屏关键内容被延迟加载（LCP问题）： 有时候，开发者会不假思索地给所有图片都加上延迟加载。但如果首屏（Above The Fold）的关键图片（比如一个大型的英雄图，或者产品主图）也被延迟加载了，那反而会拖慢Largest Contentful Paint (LCP)指标，影响用户对页面“加载完成”的感知。
3. 占位符（Placeholder）处理不当： 如果没有合适的占位符，用户在图片加载前会看到空白区域，或者一个破碎的图片图标，这都不太美观。
4. JavaScript失效时的回退机制缺失： 如果你完全依赖JavaScript实现延迟加载，而用户的浏览器禁用JS，或者JS文件加载失败，那么这些资源就永远不会加载出来，页面内容会缺失。
5. SEO抓取问题（历史遗留）： 早期搜索引擎爬虫对JavaScript渲染的内容支持不好，延迟加载可能导致图片不被索引。虽然现在Googlebot等现代爬虫已经能很好地处理JS，但如果你的目标用户群体或搜索引擎对JS支持不佳，这仍需考虑。
6. 用户体验上的过度延迟： 有时为了极致的性能，我们会把延迟加载的触发距离设置得很远（比如用户要滚动到距离元素只有50px才加载）。这可能导致用户快速滚动时，看到的是空白，而不是内容。

优化策略：

1. 始终为图片和iframe设置明确的尺寸：
   • 在

     <img>

     和

     <iframe>

     标签上明确添加

     width

     和

     height

     属性。

   • 或者使用CSS的

     aspect-ratio

     属性或padding Top Hack来预留空间，防止CLS。

   • 示例：

     <img src="placeholder.png"  alt="描述" width="800" height="600" loading="lazy">
2. 区分对待首屏和非首屏内容：
   • 首屏（Above The Fold）的关键图片和iframe，绝对不要延迟加载。 它们应该被立即加载，甚至可以使用

     <link rel="preload">

     进行预加载，以优化LCP。

   • 示例：

     <img src="hero.jpg" alt="主图" width="1200" height="800" fetchpriority="high">

     (注意，

     loading="eager"

     是默认行为，无需显式设置，但

     fetchpriority="high"

     可以进一步提示浏览器其重要性)。

3. 使用合适的占位符：
   • 低质量图片占位符（LQIP）： 加载一个极小的、模糊的图片版本作为占位符，当真实图片加载完成后替换掉。这能提升感知性能。
   • 纯色占位符： 使用图片的主色调作为背景色，直到图片加载完成。
   • SVG占位符： 对于一些图标或结构化内容，SVG占位符效果很好。
4. 提供JavaScript失效时的回退方案：
   • 对于

     loading="lazy"

     ，它本身就有回退机制（不支持的浏览器会默认加载）。

   • 对于纯JS方案，你可以在

     <noscript>

     标签中提供替代内容，或者在JS检测到不支持Intersection Observer时，直接将

     data-src

     赋值给

     src

     ，让所有图片立即加载。

5. 结合响应式图片（

   srcset

   和

   sizes

   ）：

   • 延迟加载和响应式图片是绝配。在

     <img>

     标签上同时使用

     loading="lazy"

     、

     srcset

     和

     sizes

     ，可以确保在不同设备和屏幕分辨率下，不仅能延迟加载，还能加载到最适合的图片版本，进一步节省带宽。

   • 示例：

     <img src="placeholder.png"  data-srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 480px, 800px" alt="描述" loading="lazy">

     (注意，

     srcset

     和

     sizes

     也需要放在

     data-

     属性中，待JS加载时再赋值)。

6. 调整Intersection Observer的

   rootMargin

   ：

   • 不要把

     rootMargin

     设置得太小或为0。我通常会设置一个正值，比如

     "0px 0px 200px 0px"

     ，这意味着当元素距离视口底部还有200像素时就开始加载。这样用户在滚动时，图片往往已经加载好了，不会出现空白。

7. 图片优化： 无论是否延迟加载，图片本身的优化都至关重要。使用WebP等现代图片格式，进行适当的压缩，都是减少文件大小、提升加载速度的有效手段。

总的来说，延迟加载是一个强大的工具，但它需要细致的规划和测试。避免盲目应用，而是根据实际情况，结合原生属性和JavaScript方案，并注意上述的“坑”与优化策略，才能真正发挥它的价值。

以上就是HTML中如何实现