Intersection Observer API能高效实现懒加载。它异步监听元素与视口的交叉状态，相比scroll事件更流畅，不阻塞主线程。通过观察img元素，当进入视口时将data-src赋值给src，并停止监听，可提升性能。配置rootMargin可提前加载，threshold控制触发比例，需注意兼容性及及时解绑观察器。
懒加载图片或内容能提升页面性能，Intersection Observer API 提供了一种高效监听元素是否进入视口的方式。相比传统的 scroll 事件加 getBoundingClientRect 计算，它更流畅、性能更好。
什么是 Intersection Observer API
Intersection Observer 是浏览器原生提供的 API，用于异步检测目标元素与视口的交叉状态。当某个元素进入或离开可视区域时，会触发回调函数，适合用来实现懒加载。
它的优势在于不占用主线程，不会频繁触发重排或重绘，比手动监听 scroll 事件更加高效。
基本用法：实现图片懒加载
将需要懒加载的图片的 src 放在 data-src 属性中，初始使用占位图或空白。当图片进入视口时，再将 data-src 赋值给 src。
立即学习“Java免费学习笔记（深入）”；
示例代码：
// HTML 示例
// JavaScript 实现
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img); // 加载后停止监听
}
});
});
// 开始观察所有带 .lazy 类的图片
document.querySelectorAll(‘.lazy’).forEach(img => {
observer.observe(img);
});
优化配置项
创建 IntersectionObserver 时可以传入第二个参数配置对象，控制触发时机。
root：指定根容器，默认是浏览器视口 rootMargin：扩展或收缩触发区域，如 ’50px’ 表示提前 50 像素加载 threshold：交叉比例，0.1 表示 10% 可见时触发，0 表示一进入就触发
例如，想让图片在距离视口还有 100px 时就开始加载：
const options = {
rootMargin: ‘100px’,
threshold: 0.01
};
const observer = new IntersectionObserver(callback, options);
注意事项与兼容性
Intersection Observer 在现代浏览器中支持良好，但旧版 IE 不支持。如果需要兼容，可引入 polyfill：
https://www.php.cn/link/737344cccb5f89b59a89a5f20cc3f303
另外，记得在图片加载完成后调用 unobserve，避免重复处理和内存浪费。对于频繁出现/移除的元素，也要注意及时解绑观察器。
基本上就这些，简单又高效。
以上就是如何利用JavaScript的Intersection Observer API实现懒加载？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/49068.html
微信扫一扫 
支付宝扫一扫 
