JavaScript中如何实现页面懒加载_IntersectionObserver-js教程-PHP中文网

JavaScript中如何实现页面懒加载_IntersectionObserver

狼影

发布： 2025-12-05 20:45:07

原创

272人浏览过

IntersectionObserver 实现页面懒加载最轻量高效，无需监听 scroll/resize，浏览器原生支持；核心三步：创建观察器、配置 threshold/rootMargin、调用 observe，加载后及时 unobserve。

javascript中如何实现页面懒加载_intersectionobserver

页面懒加载用 IntersectionObserver 实现最轻量、性能最好，不用监听 scroll 或 resize，浏览器原生支持，兼容性已覆盖主流现代浏览器（Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+）。

基本用法：监听元素是否进入视口

创建观察器实例，传入回调函数和配置项，再调用 observe() 开始监听目标元素：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口，执行加载逻辑（如图片 src、组件渲染等）
      const img = entry.target;
      img.src = img.dataset.src; // 加载真实图片
      observer.unobserve(img); // 加载完即停止观察，避免重复触发
    }
  });
}, {
  threshold: 0.1 // 当 10% 可见时就触发回调
});

// 观察所有带 data-src 的图片
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

登录后复制

常用配置项说明

threshold：触发回调的可见比例阈值，可为单个数字（如 0、0.5）或数组（如 [0, 0.25, 0.5, 0.75, 1]），值越小越早触发；

root：指定滚动容器（默认是浏览器视口），比如设为某个 div 元素，就以该容器为“视口”来判断是否相交；

立即学习“Java免费学习笔记（深入）”；

php中级教程之ajax技术

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它不是新的编程语言，而是一种使用现有标准的新方法，最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。《php中级教程之ajax技术》带你快速

2114

查看详情

rootMargin：类似 CSS 的 margin，用于扩大或缩小判定区域，例如 '50px 0px' 表示提前 50px 开始加载（上边距 +50px，触发更早）；

trackVisibility 和 delay：高级选项，仅在部分浏览器支持，一般不需要手动设置。

实用技巧与注意事项

加载完成后及时调用 unobserve(el)，避免反复执行；若需复用（如列表滚动中反复进出），可不取消，但要在回调里加状态判断（如 if (el.loaded) return）；
图片加载失败时建议 fallback 处理，比如显示占位图或错误提示；
服务端渲染（SSR）场景下，注意只在客户端初始化 IntersectionObserver，避免 Node 环境报错；
旧浏览器不支持时，可用 polyfill（如 w3c 官方 polyfill），或退化为 scroll 监听（慎用，注意节流）。

封装一个可复用的懒加载 Hook（类 React 场景）

简单封装便于组件内调用：

function useLazyLoad(callback) {
  const observerRef = useRef(null);

  useEffect(() => {
    observerRef.current = new IntersectionObserver(
      (entries) => entries.forEach(e => e.isIntersecting && callback(e.target)),
      { threshold: 0.05 }
    );

    return () => observerRef.current?.disconnect();
  }, []);

  return (node) => {
    if (node && observerRef.current) {
      observerRef.current.observe(node);
    }
  };
}

// 在组件中使用
function LazyImage({ src, placeholder }) {
  const ref = useLazyLoad((el) => {
    el.src = src;
  });

  return @@##@@;
}

登录后复制

基本上就这些。核心就三步：创建 observer、设定阈值、observe 目标——不复杂但容易忽略 unobserve 和 rootMargin 的灵活运用。