什么是 lazy loading？如何实现？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

Lazy loading（懒加载）是一种优化网页性能的技术，它延迟加载页面中的非关键资源（如图片、视频、脚本等），直到用户需要访问这些资源时才进行加载。通过这种方式，可以减少页面初始加载时间，提升用户体验。

实现方式

图片懒加载：

使用 Intersection Observer API 监听图片是否进入视口，进入视口时再加载图片。
使用 data-src 属性代替 src 属性，当图片进入视口时，将 data-src 的值赋给 src。

// www.javascriptcn.com code example
<img data-src="image.jpg" alt="Lazy loaded image" class="lazyload">
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const images = document.querySelectorAll(".lazyload");
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });
    images.forEach(img => observer.observe(img));
  });
</script>

脚本懒加载：

使用 async 或 defer 属性延迟加载脚本。
使用 import() 动态加载模块。

<script src="script.js" defer></script>
<script>
  import('module.js').then(module => {
    module.init();
  });
</script>

视频懒加载：

使用 poster 属性显示视频的缩略图，当用户点击播放时再加载视频。

// www.javascriptcn.com code example
<video controls poster="thumbnail.jpg">
  <source data-src="video.mp4" type="video/mp4">
</video>
<script>
  document.querySelector('video').addEventListener('click', function() {
    this.querySelector('source').src = this.querySelector('source').dataset.src;
    this.load();
  });
</script>

本题详细解读

什么是 Lazy Loading？

Lazy loading 是一种延迟加载技术，主要用于优化网页的初始加载速度。它通过延迟加载页面中的非关键资源（如图片、视频、脚本等），直到用户需要访问这些资源时才进行加载。这样可以减少页面初始加载时的资源请求量，从而加快页面加载速度，提升用户体验。

为什么需要 Lazy Loading？

减少初始加载时间：页面初始加载时只加载必要的资源，减少不必要的资源请求，从而加快页面加载速度。
节省带宽：对于用户可能不会访问的资源，延迟加载可以减少带宽消耗。
提升用户体验：通过减少页面加载时间，用户可以更快地与页面进行交互，提升用户体验。

如何实现 Lazy Loading？

图片懒加载：
- 使用 Intersection Observer API 监听图片是否进入视口，进入视口时再加载图片。
- 使用 data-src 属性代替 src 属性，当图片进入视口时，将 data-src 的值赋给 src。
脚本懒加载：
- 使用 async 或 defer 属性延迟加载脚本。
- 使用 import() 动态加载模块。
视频懒加载：
- 使用 poster 属性显示视频的缩略图，当用户点击播放时再加载视频。

注意事项

兼容性：Intersection Observer API 在现代浏览器中支持良好，但在旧版浏览器中可能需要使用 polyfill。
SEO：懒加载的图片和视频可能会影响搜索引擎的抓取，因此需要确保这些资源在页面加载后能够被搜索引擎正确索引。
用户体验：在实现懒加载时，需要考虑用户的操作习惯，避免因延迟加载导致用户等待时间过长。