HTML如何实现懒加载？延迟加载技术-html教程-PHP中文网

懒加载的核心是延迟加载资源直至进入视口，主要通过：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如何实现懒加载？延迟加载技术

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

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

Dzine

一站式AI图像生成、设计、编辑平台

下载

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

视频： 延迟加载视频可以减少初始页面加载时间，尤其是在页面包含多个视频时。可以使用
标签的
```
poster
```
属性显示占位图，然后在视频进入视口时加载视频源。
iframe： 例如嵌入的地图、社交媒体组件等。这些 iframe 通常会加载大量的 JavaScript 和 CSS，延迟加载它们可以显著提升页面性能。
字体： 虽然字体通常体积不大，但如果页面使用了大量自定义字体，延迟加载它们可以避免页面在字体加载完成前显示空白或默认字体。
JavaScript： 对于一些非必要的 JavaScript 代码，可以延迟加载，例如用于处理用户交互的脚本。

副标题2

如何优化懒加载的性能？

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

使用节流（Throttling）或防抖（Debouncing）： 滚动事件会频繁触发，使用节流或防抖可以减少事件处理函数的执行次数，提高性能。
预加载： 在图片即将进入视口之前，提前开始加载。这可以通过调整
```
IntersectionObserver
```
的
```
rootMargin
```
选项来实现。例如，设置
```
rootMargin: '200px'
```
会在图片距离视口 200px 时开始加载。
占位符： 在图片加载完成之前，显示一个占位符，避免页面出现空白或闪烁。可以使用纯色、渐变色或低分辨率的图片作为占位符。
CDN： 使用 CDN 加速资源的加载速度。
压缩图片： 减小图片的文件大小，缩短加载时间。

副标题3

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

IntersectionObserver

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

使用 Polyfill： 可以使用
```
IntersectionObserver
```
的 Polyfill 来为不支持该 API 的浏览器提供支持。例如，可以使用 w3c 的官方 Polyfill。
回退到滚动事件监听： 如果浏览器不支持
```
IntersectionObserver
```
，就回退到传统的滚动事件监听。上面提供的代码示例就包含了这种回退机制。
feature detection： 使用 feature detection 来检测浏览器是否支持
```
IntersectionObserver
```
，然后根据检测结果选择不同的加载方式。

副标题4

懒加载的 SEO 影响？

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

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

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