HTML如何实现懒加载？延迟加载技术

懒加载的核心是延迟加载资源直至进入视口，主要通过：1. 监听滚动事件或使用intersectionobserver；2. 判断元素是否可见；3. 动态加载资源。推荐使用intersectionobserver因其性能更优。除了图片，懒加载还可用于：1. 视频；2. iframe；3. 字体；4. javascript。性能优化包括：1. 使用节流或防抖；2. 预加载；3. 添加占位符；4. 使用cdn；5. 压缩图片。兼容性问题可通过：1. 使用polyfill；2. 回退到滚动监听；3. 特性检测来解决。seo影响可通过：1. 确保资源可被爬虫访问；2. 使用noscript标签；3. 采用ssr；4. 使用lighthouse测试来避免，从而确保页面内容完整被索引。

HTML实现懒加载，本质上就是延迟加载图片或其他资源，直到它们真正进入用户的视口。这样做可以显著提升页面初始加载速度，改善用户体验。

解决方案：

懒加载的核心在于：1. 监听滚动事件；2. 判断元素是否进入视口；3. 加载资源。

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

最常见的实现方式是利用

data-*

属性和 JavaScript。

@@##@@

JavaScript 代码如下：

document.addEventListener("DOMContentLoaded", function() {   let lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load"));    if ("IntersectionObserver" in window) {     let lazyImageObserver = new IntersectionObserver(function(entries, observer) {       entries.forEach(function(entry) {         if (entry.isIntersecting) {           let lazyImage = entry.target;           lazyImage.src = lazyImage.dataset.src;           lazyImage.classList.remove("lazy-load");           lazyImageObserver.unobserve(lazyImage);         }       });     });      lazyImages.forEach(function(lazyImage) {       lazyImageObserver.observe(lazyImage);     });   } else {     // 兼容不支持 IntersectionObserver 的浏览器，使用传统的滚动事件监听     let active = false;      const lazyLoad = function() {       if (active === false) {         active = true;          setTimeout(function() {           lazyImages.forEach(function(lazyImage) {             if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0 && getComputedStyle(lazyImage).display !== "none") {               lazyImage.src = lazyImage.dataset.src;               lazyImage.classList.remove("lazy-load");               lazyImages = lazyImages.filter(function(image) {                 return image !== lazyImage;               });                if (lazyImages.length === 0) {                 document.removeEventListener("scroll", lazyLoad);               }             }           });            active = false;         }, 200);       }     };      document.addEventListener("scroll", lazyLoad);   } });

这段代码首先找到所有带有

lazy-load

类的图片。然后，它会检查浏览器是否支持

IntersectionObserver

API。如果支持，就使用它来监听图片是否进入视口。如果不支持，就使用传统的滚动事件监听。

为什么推荐使用

IntersectionObserver

？因为它性能更高，更准确。滚动事件监听可能会频繁触发，而

IntersectionObserver

只有在元素进入或离开视口时才会触发。

副标题1

懒加载除了图片，还能用于哪些资源？

除了图片，懒加载还可以应用于：

• 视频： 延迟加载视频可以减少初始页面加载时间，尤其是在页面包含多个视频时。可以使用

  <video>

  标签的

  poster

  属性显示占位图，然后在视频进入视口时加载视频源。

• iframe： 例如嵌入的地图、社交媒体组件等。这些 iframe 通常会加载大量的 JavaScript 和 CSS，延迟加载它们可以显著提升页面性能。
• 字体： 虽然字体通常体积不大，但如果页面使用了大量自定义字体，延迟加载它们可以避免页面在字体加载完成前显示空白或默认字体。
• JavaScript： 对于一些非必要的 JavaScript 代码，可以延迟加载，例如用于处理用户交互的脚本。

副标题2

如何优化懒加载的性能？

优化懒加载的性能可以从以下几个方面入手：

1. 使用节流（Throttling）或防抖（Debouncing）： 滚动事件会频繁触发，使用节流或防抖可以减少事件处理函数的执行次数，提高性能。
2. 预加载： 在图片即将进入视口之前，提前开始加载。这可以通过调整

   IntersectionObserver

   的

   rootMargin

   选项来实现。例如，设置

   rootMargin: '200px'

   会在图片距离视口 200px 时开始加载。

3. 占位符： 在图片加载完成之前，显示一个占位符，避免页面出现空白或闪烁。可以使用纯色、渐变色或低分辨率的图片作为占位符。
4. CDN： 使用 CDN 加速资源的加载速度。
5. 压缩图片： 减小图片的文件大小，缩短加载时间。

副标题3

懒加载的兼容性问题如何解决？

IntersectionObserver

API 的兼容性虽然不错，但仍然有一些旧版本的浏览器不支持。为了解决兼容性问题，可以：

1. 使用 Polyfill： 可以使用

   IntersectionObserver

   的 Polyfill 来为不支持该 API 的浏览器提供支持。例如，可以使用 w3c 的官方 Polyfill。

2. 回退到滚动事件监听： 如果浏览器不支持

   IntersectionObserver

   ，就回退到传统的滚动事件监听。上面提供的代码示例就包含了这种回退机制。

3. feature detection： 使用 feature detection 来检测浏览器是否支持

   IntersectionObserver

   ，然后根据检测结果选择不同的加载方式。

副标题4

懒加载的 SEO 影响？

如果懒加载处理不当，可能会对 SEO 产生负面影响。搜索引擎爬虫可能无法正确加载延迟加载的资源，导致页面内容不完整。为了避免这种情况，可以：

1. 确保搜索引擎可以访问所有资源： 确保延迟加载的资源可以通过 HTML 源代码访问。
2. 使用

   noscript

   标签： 对于重要的图片，可以使用

   <noscript>

   标签提供一个备选方案，以便在 JavaScript 被禁用时也能显示图片。

3. 使用服务器端渲染（SSR）： 使用 SSR 可以将页面渲染成完整的 HTML，包括延迟加载的资源，然后再返回给客户端和搜索引擎爬虫。
4. 使用 Google 的 Lighthouse 工具进行测试： Lighthouse 可以帮助你检测页面是否存在 SEO 问题，并提供改进建议。

以上就是HTML如何实现懒加载？