Intersection Observer API能高效实现图片懒加载，提升网页性能。它通过异步监听元素与视口的交叉状态触发回调，避免频繁scroll事件带来的性能问题。使用时将真实图片地址存于data-src，结合new IntersectionObserver监听元素进入视口，预加载后替换src并停止观察，配合rootMargin提前加载、threshold设置触发比例，并建议添加错误处理、防重复加载及组件卸载时disconnect优化体验。
图片懒加载能有效提升网页性能，减少初始加载时间。传统做法依赖 scroll 事件监听和 getBoundingClientRect 计算元素位置，但频繁触发会影响性能。现代方案推荐使用 Intersection Observer API，它由浏览器异步处理，更高效、更流畅。
Intersection Observer 是 JavaScript 提供的一个 API，用于监测某个元素是否进入视口（viewport）。当目标元素与根元素（通常是视口）的交叉比例达到设定阈值时，回调函数就会被触发。
相比 scroll 事件，它不会阻塞主线程，性能更好，特别适合实现懒加载、无限滚动等场景。
创建一个观察器实例：
立即学习“Java免费学习笔记（深入）”；
const observer = new IntersectionObserver(callback, options);callback：当交叉状态变化时执行的函数，接收一个 entries 数组和 observer 实例。
options 可选配置项：
以下是具体实现方式：
1. HTML 结构
将真实图片地址放在 data-src 属性中，src 使用占位图或透明 GIF：
<img class="lazy" src="placeholder.gif" alt="图片1">2. JavaScript 监听并加载图片
const images = document.querySelectorAll('.lazy'); const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; const src = img.dataset.src; // 创建临时图片对象预加载 const tempImg = new Image(); tempImg.onload = () => { img.src = src; img.classList.add('loaded'); // 可添加类控制淡入等效果 }; tempImg.src = src; // 加载完成后停止观察 observer.unobserve(img); } }); }, { rootMargin: '50px', // 提前 50px 开始加载 threshold: 0.01 // 只要露出 1%，就触发加载 }); // 观察每一张懒加载图片 images.forEach(img => imageObserver.observe(img));实际项目中可加入以下改进：
基本上就这些。Intersection Observer 让懒加载变得简单又高效，兼容性也较好（现代浏览器均支持，IE 需要 polyfill）。不复杂但容易忽略细节，掌握后能显著提升用户体验。
以上就是使用Intersection Observer实现懒加载_javascript api的详细内容，更多请关注php中文网其它相关文章！
java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
328
收藏
