js延迟加载，懒加载实现

在 JavaScript 中，可以使用一些方法来实现延迟加载，延迟加载的核心思想是在用户需要数据时才进行加载，从而提高网页的响应速度。

以下是实现延迟加载的常见方法:

懒加载

对于图片加载，可以使用图片懒加载来实现延迟加载的效果。图片懒加载可以在页面滚动到图片需要加载的位置时，才开始加载图片。

HTML 代码：

<img src="placehodler.jpg" data-src="real-image.jpg" />

JavaScript 代码：

// 1. 获取所有需要懒加载的图片元素
let images = document.querySelectorAll("img[data-src]");

// 2. 遍历需要懒加载的图片元素
for (let img of images) {
  // 3. 判断图片是否进入视口
  if (isInViewport(img)) {
    // 4. 加载图片
    img.src = img.dataset.src;
  }
}

// 5. 监听页面滚动事件，实时更新图片的加载状态
document.addEventListener("scroll", function () {
  for (let img of images) {
    if (isInViewport(img) && !img.src) {
      img.src = img.dataset.src;
    }
  }
});

// 判断元素是否进入视口
function isInViewport(el) {
  let rect = el.getBoundingClientRect();
  return (
    rect.bottom > 0 &&
    rect.top < window.innerHeight &&
    rect.right > 0 &&
    rect.left < window.innerWidth
  );
}

上述代码中，我们首先获取所有需要懒加载的图片元素，然后遍历这些元素，判断是否需要加载。判断的方法是使用了 isInViewport 函数，该函数用于判断图片是否已经进入用户的可视范围。如果图片已经进入可视范围，则将图片的 data-src 属性设为 src 属性，从而达到延迟加载的效果。