IntersectionObserver 实现页面懒加载最轻量高效，无需监听 scroll/resize，浏览器原生支持；核心三步：创建观察器、配置 threshold/rootMargin、调用 observe，加载后及时 unobserve。
页面懒加载用 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免费学习笔记（深入）”；
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 的灵活运用。
以上就是JavaScript中如何实现页面懒加载_IntersectionObserver的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541163.html
微信扫一扫 
支付宝扫一扫 
