懒加载，别只知道LazyLoad！你还可以这么玩！

前端

2023-08-09 02:19:10

懒加载：减少白屏时间，优化网站加载速度

了解懒加载

想象一下，你在使用智能手机浏览一个网页，突然它开始疯狂加载，加载速度慢得让人抓狂。这种情况不仅会让你感到沮丧，还会让你产生关闭网页的冲动。为了避免这种情况，出现了懒加载技术。

懒加载是一种技术，它允许你在媒体资源（如图片或视频）进入可视区域时才加载它们。也就是说，只要内容未出现在你屏幕上，它就不会被加载。

懒加载的实现方法

有两种主要方法可以实现懒加载：

1. 基于 Intersection Observer API 的懒加载

Intersection Observer API 允许你为页面中的每个元素注册一个侦听器。当元素进入或离开视口时，侦听器就会触发回调函数，从而加载媒体资源。

2. 基于定时器（滚动事件）的懒加载

这种方法使用定时器定期检查元素的位置。如果元素进入或离开视口，则会触发回调函数加载媒体资源。

懒加载的优势

懒加载可以为你的网站带来以下好处：

减少白屏时间： 由于图片和视频不会提前加载，因此加载时间会大大减少。
提高加载速度： 通过只加载用户可见的内容，可以大幅提高网站速度。
节省带宽： 用户看不到的图片或视频不会被加载，从而节省带宽。
提高用户体验： 白屏时间缩短、加载速度加快，用户将拥有更愉快的体验。

懒加载的局限性

虽然懒加载有很多优点，但它也有一些局限性：

增加复杂性： 实现懒加载需要更多的代码。
需要浏览器支持： 懒加载依赖于浏览器支持，因此你需要确保你的网站面向的是支持它的浏览器。
不适用于所有场景： 在某些情况下，懒加载并不是最佳选择，例如，当图片或视频的内容非常重要时，你需要提前加载它们。

懒加载的适用场景

懒加载有许多应用场景，包括：

瀑布流： 延迟加载那些未进入可视区域的图片。
无限滚动： 延迟加载那些尚未显示的内容。
图片库： 延迟加载那些尚未可见的图片。
视频播放器： 延迟加载那些尚未显示的视频。

结论

懒加载是一种强大的技术，它可以通过优化加载时间和用户体验来提升网站性能。通过了解它的优势和局限性，你可以决定它是否适合你的网站。

常见问题解答

1. 如何实现基于 Intersection Observer API 的懒加载？

const lazyImages = document.querySelectorAll("img[data-src]");
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
      observer.unobserve(entry.target);
    }
  });
});
lazyImages.forEach((image) => {
  observer.observe(image);
});

2. 如何实现基于定时器（滚动事件）的懒加载？

const lazyImages = document.querySelectorAll("img[data-src]");
const threshold = 0.5; // 进入可视区域的阈值

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    const lazyImage = mutation.target;
    if (lazyImage.getBoundingClientRect().top < window.innerHeight * threshold) {
      lazyImage.setAttribute("src", lazyImage.getAttribute("data-src"));
      observer.unobserve(lazyImage);
    }
  });
});

lazyImages.forEach((image) => {
  observer.observe(image, { attributes: true, attributeFilter: ["src"] });
});