图片加载优化

图片预加载

与懒加载相反，预加载是在页面加载之前就加载图片，目的是在用户滚动到图片之前就已经加载完成，从而避免出现加载过程中的空白或者等待时间。

以下是一个图片预加载的示例：

function preloadImages(array) {
  array.forEach((item) => {
    const img = new Image();
    img.src = item;
  });
}

// 使用函数预加载一组图片
preloadImages(["image1.jpg", "image2.jpg", "image3.jpg"]);

图片懒加载

懒加载是一种优化网页或应用的加载时间的技术。在这种技术下，图片将在需要显示在用户视窗中时才开始加载，而不是在页面加载时立即加载所有图片。这样可以减少初始页面加载时的网络带宽和加载时间。

以下是一个简单的图片懒加载的实现方法：

document.addEventListener("DOMContentLoaded", function () {
  const lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function (
      entries,
      observer
    ) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    lazyImages.forEach(function (lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback for browsers that don't support IntersectionObserver
    // 直接加载所有图片，或者使用其他懒加载的polyfill
  }
});