博客站

懒加载（Lazy Loading）是一种优化网页性能的技术，它延迟加载页面中的某些资源（如图片、视频、脚本等），直到这些资源真正需要显示或使用时才加载。这样可以减少初始页面加载时间，提升用户体验。

实现 HTML 页面懒加载的常见方法：

1. 图片懒加载

图片是网页中最常见的需要懒加载的资源。可以通过以下方式实现图片的懒加载：

• 使用 loading="lazy" 属性： HTML5 引入了 loading="lazy" 属性，可以简单地实现图片的懒加载。

  <img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" loading="lazy" alt="示例图片">
  

• 使用 Intersection Observer API： Intersection Observer API 可以监听元素是否进入视口，从而实现懒加载。

  <img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" class="lazyload" alt="示例图片">
  <script>
      document.addEventListener("DOMContentLoaded", function() {
          var lazyloadImages = document.querySelectorAll("img.lazyload");
          var lazyloadThrottleTimeout;
  
          function lazyload() {
              if (lazyloadThrottleTimeout) {
                  clearTimeout(lazyloadThrottleTimeout);
              }
  
              lazyloadThrottleTimeout = setTimeout(function() {
                  var scrollTop = window.pageYOffset;
                  lazyloadImages.forEach(function(img) {
                      if (img.offsetTop < (window.innerHeight + scrollTop)) {
                          img.src = img.dataset.src;
                          img.classList.remove('lazyload');
                      }
                  });
                  if (lazyloadImages.length == 0) {
                      document.removeEventListener("scroll", lazyload);
                      window.removeEventListener("resize", lazyload);
                      window.removeEventListener("orientationChange", lazyload);
                  }
              }, 20);
          }
  
          document.addEventListener("scroll", lazyload);
          window.addEventListener("resize", lazyload);
          window.addEventListener("orientationChange", lazyload);
      });
  </script>
  

2. iframe 懒加载

iframe 也可以通过 loading="lazy" 属性实现懒加载。

<iframe src="about:blank" data-src="https://example.com" loading="lazy"></iframe>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var iframes = document.querySelectorAll("iframe[data-src]");
        iframes.forEach(function(iframe) {
            iframe.src = iframe.dataset.src;
        });
    });
</script>

3. 视频懒加载

视频可以通过 preload="none" 属性实现懒加载。

<video controls preload="none" poster="placeholder.jpg">
    <source data-src="video.mp4" type="video/mp4">
    您的浏览器不支持视频元素。
</video>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var videos = document.querySelectorAll("video source[data-src]");
        videos.forEach(function(video) {
            video.src = video.dataset.src;
        });
    });
</script>

4. 脚本懒加载

脚本可以通过 defer 或 async 属性实现懒加载。

<script src="script.js" defer></script>
<script src="script.js" async></script>

• defer：脚本在文档解析完成后执行，但按照它们在文档中出现的顺序执行。
• async：脚本在下载完成后立即执行，不保证执行顺序。

5. 使用第三方库

可以使用第三方库来简化懒加载的实现，如 Lazysizes。

• 引入 Lazysizes：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
  

• 使用 Lazysizes：

  <img data-src="image-to-lazy-load.jpg" class="lazyload" alt="示例图片">
  

总结：

• 懒加载可以通过 loading="lazy" 属性、Intersection Observer API、preload="none" 属性、defer 和 async 属性以及第三方库（如 Lazysizes）来实现。
• 懒加载可以减少初始页面加载时间，提升用户体验，特别是在包含大量图片、视频或 iframe 的网页中。