js如何延迟加载html

JavaScript 延迟加载 HTML 的主要目的是提高页面的加载速度和性能。通过延迟加载非关键资源，可以减少初始页面加载所需的时间，从而提升用户体验。以下是一些基础概念和相关技术：

基础概念

延迟加载（Lazy Loading）：只在需要时加载资源，而不是在页面初始加载时就加载所有资源。
关键渲染路径（Critical Rendering Path）：浏览器渲染页面所需的一系列步骤，包括解析 HTML、CSS 和 JavaScript，构建 DOM 树和渲染树等。

类型与应用场景

图片延迟加载：适用于包含大量图片的页面。
视频延迟加载：适用于嵌入视频的页面。
脚本延迟加载：适用于非关键的 JavaScript 文件。
iframe 延迟加载：适用于嵌入第三方内容的 iframe。

实现方法

以下是一些常见的实现延迟加载的方法：

图片延迟加载

使用 IntersectionObserver API 来检测图片是否在视口中，并在进入视口时加载图片。

<img src="placeholder.jpg" data-src="real-image.jpg" class="lazy-load">

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll('.lazy-load');

  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          observer.unobserve(img);
        }
      });
    });

    lazyImages.forEach(img => observer.observe(img));
  } else {
    // Fallback for browsers that don't support IntersectionObserver
    lazyImages.forEach(img => {
      img.src = img.dataset.src;
    });
  }
});

脚本延迟加载

使用 defer 或 async 属性来延迟加载 JavaScript 文件。

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

defer：脚本会在页面解析完成后，但在 DOMContentLoaded 事件触发前执行。
async：脚本会在下载完成后立即执行，不会阻塞页面解析。

iframe 延迟加载

类似于图片延迟加载，可以使用 IntersectionObserver 来延迟加载 iframe。

<iframe data-src="https://example.com" class="lazy-load"></iframe>

document.addEventListener("DOMContentLoaded", function() {
  const lazyIframes = document.querySelectorAll('.lazy-load');

  if ('IntersectionObserver' in window) {
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const iframe = entry.target;
          iframe.src = iframe.dataset.src;
          observer.unobserve(iframe);
        }
      });
    });

    lazyIframes.forEach(iframe => observer.observe(iframe));
  } else {
    // Fallback for browsers that don't support IntersectionObserver
    lazyIframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });
  }
});

遇到问题及解决方法

问题：某些浏览器不支持 IntersectionObserver API。 解决方法：提供一个回退方案，例如使用传统的滚动事件监听来检测元素是否进入视口。

function lazyLoadImages() {
  const lazyImages = document.querySelectorAll('.lazy-load');
  lazyImages.forEach(img => {
    if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) {
      img.src = img.dataset.src;
      img.classList.remove('lazy-load');
    }
  });
}

window.addEventListener('scroll', lazyLoadImages);
window.addEventListener('resize', lazyLoadImages);
window.addEventListener('orientationchange', lazyLoadImages);

document.addEventListener("DOMContentLoaded", lazyLoadImages);

通过这些方法，可以有效地实现 HTML 的延迟加载，提升页面性能和用户体验。