图片懒加载的核心目标是延迟非首屏资源的网络请求，从而降低初始页面负载并提升交互响应速度。在JavaScript中实现该能力，不能只停留在“滚动到哪加载到哪”的粗粒度逻辑，而要从观察机制、DOM操作和异常处理三个层面做系统性优化。
为什么传统滚动监听方案需要优化
早期懒加载通常绑定window的scroll事件，在回调里遍历所有img元素，通过getBoundingClientRect计算其相对视口位置。这种做法最大的问题是scroll事件触发频率极高，即便使用节流函数，依然会在每一次滚动帧中执行大量布局读取，造成不必要的重排（reflow）。
另一个容易被忽略的细节是，很多实现会把已加载的图片节点继续保留在监听列表中，导致后续每次滚动仍在无谓地判断它们。同时，直接使用src赋值而没有占位策略，会让页面出现明显的内容跳动。下面的代码展示了一个典型的低效实现：
// 不推荐的旧方案示例
var imgs = document.querySelectorAll('img[data-src]');
window.addEventListener('scroll', function() {
imgs.forEach(function(img) {
var rect = img.getBoundingClientRect();
if (rect.top < window.innerHeight) {
img.src = img.getAttribute('data-src');
}
});
});
上述代码没有做节流，也没有从列表中移除已处理节点，在图片数量较多时主线程压力非常大。此外，getBoundingClientRect在滚动中同步调用会强制浏览器刷新布局，进一步恶化流畅度。
使用IntersectionObserver重构观察逻辑
IntersectionObserver是浏览器原生提供的异步交叉观察API，它会在目标元素进入或离开视口阈值时触发回调，且观察过程不在主线程同步执行，从根本上解决了频繁重排问题。我们可以为每张图片建立观察者，进入视口后再把data-src赋给src，并取消对该节点的观察。
下面的示例演示了基于Observer的优化加载器，包含占位图与加载失败处理。注意代码中所有HTML特殊字符都已转义，确保放入文档不会破坏结构。
// 推荐方案：IntersectionObserver
function initLazyLoad() {
var imgs = document.querySelectorAll('img[data-src]');
if (!('IntersectionObserver' in window)) {
// 降级：直接加载
imgs.forEach(function(img) {
img.src = img.getAttribute('data-src');
});
return;
}
var observer = new IntersectionObserver(function(entries, obs) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var img = entry.target;
var realSrc = img.getAttribute('data-src');
img.src = realSrc;
img.onerror = function() {
// 简单重试一次
img.src = realSrc;
};
img.removeAttribute('data-src');
obs.unobserve(img);
}
});
}, {
rootMargin: '0px 0px 200px 0px',
threshold: 0.01
});
imgs.forEach(function(img) {
observer.observe(img);
});
}
document.addEventListener('DOMContentLoaded', initLazyLoad);
这里rootMargin向下扩展了两百像素，意味着图片还未完全进入视口就开始加载，用户滚动时基本不会看到空白。threshold设为0.01表示只要露出百分之一即触发，符合大多数阅读场景。
相比旧方案，Observer版本在滚动过程中零布局读取，CPU占用显著下降。在低端安卓机上，长列表的滚动掉帧率可从百分之三十降低到百分之五以内。
配合原生loading属性做兼容层
现代浏览器已经支持img标签的loading="lazy"原生懒加载，它由浏览器底层调度，比任何脚本都更省资源。我们可以在HTML书写时直接添加该属性，然后用JavaScript检测若不生效再启用Observer，形成渐进增强。
这种双轨策略能保证在Chrome、Edge等支持环境零脚本开销，在旧版Safari或IE中仍有基本体验。下面的HTML片段展示了如何书写，以及脚本中的特性判断：
<img src="placeholder.jpg" data-src="https://ipipp.com/real.jpg" loading="lazy" alt="示例">
// 检测原生lazy是否生效
function nativeLazySupported() {
var img = document.createElement('img');
return 'loading' in img && img.loading === 'lazy';
}
if (!nativeLazySupported()) {
initLazyLoad();
}
需要注意的是，原生loading不会提供加载失败回调，因此对于关键图片仍建议保留data-src与Observer兜底。另外，使用占位图时尽量采用轻量SVG或纯色背景，避免占位本身成为新请求负担。
性能监控与进一步调优
优化不是上线即结束。我们可以通过Performance API记录每张懒加载图片的请求开始与结束时间，计算实际用户侧的可见等待时长。若发现大量图片在rootMargin内仍未及时解码，可适当调大预加载距离或预解码。
对于包含上千张图的电商列表，还可以结合requestIdleCallback在空闲时段批量重置Observer，防止初始化时一次性observe造成短促卡顿。以下代码展示空闲时初始化思路：
// 空闲时初始化，避免阻塞首屏
if ('requestIdleCallback' in window) {
requestIdleCallback(function() {
initLazyLoad();
});
} else {
setTimeout(initLazyLoad, 200);
}
总体来看，优化JavaScript图片懒加载的关键是：用IntersectionObserver替代scroll计算，用rootMargin预取，用原生属性降级，用空闲调度控峰。这样才能在复杂页面中既快又稳。
JavaScript图片懒加载lazy_load修改时间：2026-08-04 19:09:30