js如何写延迟加载

JavaScript 中延迟加载

什么是延迟加载？

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

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

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

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

示例代码：

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

// 2. 监听滚动事件
window.addEventListener(\'scroll\', () =&gt; {

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

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