JavaScript - 延迟加载

JavaScript 中有一些方法可以提高网站速度。这意味着，我们可以只加载需要的内容，例如图片、视频等。当前不需要的文件或数据，可以在以后需要时加载，这称为延迟加载。

例如，当您打开 Instagram 应用时，它只会加载当前屏幕框架内可见的图片和视频。但当您向下滚动时，您会看到更多图片和视频正在加载。 Instagram 使用延迟加载来提升用户体验并加快应用加载速度。

为什么需要延迟加载

延迟加载的用途如下:

• 当您的网站上有大量图片和文件时，延迟加载非常有用。
• 延迟加载还有助于提升网站性能。
• 延迟加载还可用于提升用户体验。
• 延迟加载还可用于缩短网站的加载时间。

延迟加载示例

以下是 JavaScript 中延迟加载的代码片段:

const images = document.querySelectorAll("[data-src]");
function preloadImage(img) {
   const src = img.getAttribute("data-src");
   if (!src) {
       return;
   }
   img.src = src;
   img.removeAttribute("data-src");
}
const imgOptions = {
   threshold: 0,
   rootMargin: "0px 0px 300px 0px"
};
const imgObserver = new IntersectionObserver((entries, imgObserver) => {
   entries.forEach(entry => {
      if (!entry.isIntersecting) {
         return;
      } else {
         preloadImage(entry.target);
         imgObserver.unobserve(entry.target);
      }
   });
}, imgOptions);
images.forEach(image => {
    imgObserver.observe(image);
});

此代码片段旨在使图像在视口中加载。它会查找带有 data-src 属性(类似于占位符)的图像，并为每个图像设置一个"观察者"。

观察者 (IntersectionObserver) 将检查图像是否在视口中，如果发现图像在视口中，它将加载实际图像并移除 data-src 属性。然后，它将停止观察该图像，以免再次加载。这样，页面就不会一次性加载所有内容。