js如何写延迟加载

延迟加载是一种推迟加载资源的技术，使其仅在需要使用时加载，从而提高页面加载速度和初始性能。使用javascript进行延迟加载涉及四个步骤：(1)创建图像占位符；(2)监听滚动事件；(3)判断图像是否可见；(4)加载图像，并用实际图像替换占位符。延迟加载的优势包括提高页面加载速度、减少初始加载带宽和改善用户体验。

(图1)

JavaScript 中延迟加载

什么是延迟加载？

延迟加载是一种优化技术，它将资源的加载推迟到需要使用的时候才进行。这有助于提高页面的加载速度和初始性能。

如何使用 JavaScript 进行延迟加载？

使用 JavaScript 延迟加载图像或其他资源，可以通过以下步骤实现：

创建图像占位符：使用一个不可见的图像或占位符来代替实际图像。
监听滚动事件：在页面滚动时，监听滚动事件。
判断图像是否可见：使用 getBoundingClientRect() 方法获取图像元素相对于视口的距离，如果距离小于视口的尺寸，则表示图像已进入可视区域。
加载图像：如果图像已进入可视区域，则使用 AJAX 或 fetch() API 加载实际图像，并替换占位符。

示例代码：

// 1. 创建图像占位符
const placeholder = document.querySelector('.placeholder');

// 2. 监听滚动事件
window.addEventListener('scroll', () => {

  // 3. 判断图像是否可见
  const rect = placeholder.getBoundingClientRect();
  if (rect.top  0) {

    // 4. 加载图像
    const image = new Image();
    image.onload = () => {
      placeholder.src = image.src;
    };
    image.src = 'path/to/actual_image.jpg';
  }
});