使用 JavaScript 怎么实现懒加载页面数据

使用 JavaScript 实现懒加载页面数据的方法包括利用 IntersectionObserver API、监听 scroll 事件、使用第三方库、以及通过 CSS 的 display 属性进行控制。这些方法可以有效改善网页的性能和用户体验，尤其是在加载大量数据或媒体内容的网页上。最推荐的方法是利用 IntersectionObserver API，因为它提供了一种异步检测目标元素与其祖先或视口的交集变化的能力。这种方法不仅反应迅速、效率高，而且可以减少不必要的资源加载，从而优化网页性能。

一、利用 `IntersectionObserver` API

IntersectionObserver API 是用来帮助开发者实现元素的异步检测，比如是否进入了视口范围内。借助此技术可以非常精确地控制懒加载数据的时机。

首先，创建一个 IntersectionObserver 的实例，并为它传递一个回调函数和一个可选的配置对象。回调函数会在目标元素与视口交叉时被触发，而配置对象则可以用来设置观察者的根元素、根元素的边界等。

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 当被观察的元素进入视口时触发的操作，比如加载数据
      loadData(entry.target);
      // 数据加载后，停止观察该元素
      observer.unobserve(entry.target);
    }
  });
});

紧接着，用该实例来观察一个或多个元素。只需简单地将希望懒加载的元素通过 observe 方法传递给观察者即可。

document.querySelectorAll('.lazy-load').forEach(element => {
  observer.observe(element);
});

二、监听 `scroll` 事件

在没有 IntersectionObserver API 或需要支持旧版浏览器时，监听 scroll 事件是实现懒加载的另一种方法。通过检测滚动事件和计算元素位置，开发者可以判断元素是否进入了可视范围内，并据此决定是否加载数据。

首先，为页面添加一个 scroll 事件监听器，并在事件触发时执行检查函数。

window.addEventListener('scroll', checkPosition);
window.addEventListener('load', checkPosition);

然后，实现一个检查函数，用于确认每个懒加载元素是否已进入视口：

function checkPosition() {
  const elements = document.querySelectorAll('.lazy-load');
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    if (element.getBoundingClientRect().top < window.innerHeight) {
      loadData(element);
      // 防止多次加载
      element.classList.remove('lazy-load');
    }
  }
}

三、使用第三方库

市面上也有许多成熟的第三方库可以帮助快速实现懒加载，如 lozad.js、lazysizes 等。这些库通常具有良好的跨浏览器兼容性，并提供了丰富的功能和简化的API，使开发者可以轻松实现懒加载，甚至是更复杂的性能优化策略。

// 使用 lazysizes 实现懒加载
import 'lazysizes';
// 只需在html中按规范添加类名和数据属性即可自动处理懒加载

四、通过 `CSS` 的 `display` 属性进行控制

虽然这种方法相对简单，并且不直接涉及 JavaScript，但通过控制元素的 display 属性，也可以在某种程度上实现懒加载的效果。主要思路是一开始通过 CSS 将不在视口中的内容隐藏起来，然后结合 JavaScript 在合适的时机显示这些内容。

首先，在 CSS 中预设元素的显示状态：

.lazy-load { display: none; }

接着，使用 JavaScript 在滚动事件中判断并修改元素的显示状态：

window.addEventListener('scroll', () => {
  const elements = document.querySelectorAll('.lazy-load');
  elements.forEach(element => {
    if (element.getBoundingClientRect().top < window.innerHeight) {
      element.style.display = 'block';
    }
  });
});

尽管这种方法在实践中较少见，但对于某些特定场景下的简单应用，它仍然是一种可行的懒加载实现方式。