如何用JavaScript实现懒加载_提升网页加载速度？

懒加载的核心是元素进入视口时才加载资源，推荐使用 Intersection Observer API 监听并触发加载，兼容性不足时降级为节流 scroll + getBoundingClientRect，同时需处理图片 load/error 状态及首屏关键资源优化。

懒加载的核心是让图片或内容在进入视口时才开始加载，避免页面初始就请求大量资源。关键不是等页面加载完，而是监听滚动和元素位置变化，动态触发资源加载。

监听滚动 + 判断元素是否进入视口

用 Intersection Observer API 是最推荐的方式——它性能好、写法简洁、原生支持，无需手动计算偏移量或频繁触发 scroll 事件。

• 创建 observer 实例，设置 rootMargin（如 "0px 0px 100px 0px" 表示提前 100px 开始加载）
• 给需要懒加载的图片加 data-src 属性，src 先设为空或占位图
• observer 回调中，当 isIntersecting 为 true，把 data-src 赋值给 src，并可调用 unobserve() 防止重复加载

兼容性处理：不支持 Intersection Observer 时降级

对于 IE 或老版本 Safari，可用传统 scroll + getBoundingClientRect 方案，但要注意节流（如用 setTimeout 防抖）避免卡顿。

• 监听 window.onscroll 或 addEventListener('scroll')
• 遍历所有懒加载元素，用 el.getBoundingClientRect().top 判断是否已出现在视口内
• 加载后从待检查列表中移除该元素，减少后续计算量

图片加载完成与失败的状态处理

仅设置 src 不够，还需监听 load 和 error 事件，提升用户体验。

标签： css javascript java html js 浏览器 懒加载 safari win 资源优化