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-*

<img  alt="懒加载图片" class="lazy-load">

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

为什么推荐使用

IntersectionObserver

IntersectionObserver

副标题1

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

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

63

查看详情

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

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

  <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

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如何实现懒加载？延迟加载技术的详细内容，更多请关注php中文网其它相关文章！