1. 懒加载的原理与目标
在网页加载过程中，图片往往占用较大带宽与渲染时间。通过将图片资源的实际地址留在 data-src 等属性，等到需要加载时再将其赋予 src，可以实现延迟加载。核心目标是提升初始渲染速度、降低首屏资源消耗、减少带宽浪费。
实现懒加载的关键在于检测图片何时进入可视区域，并在需要时触发真实资源的加载。可视区域与阈值的判断决定了加载时机。
1.1 基本机制
当页面滚动、缩放或尺寸变化时，系统需要知道哪些图片即将进入视口。通常通过事件监听或浏览器提供的 API，来触发加载动作。事件驱动与节流可以帮助控制加载频率。
通过合理安排占位图片和渐进加载策略，初始页面布局稳定性可以得到保障，同时逐步加载资源提升用户感知性能。
1.2 场景与边界条件
长页面、图片网格、无穷滚动列表等场景对懒加载提出不同的约束。边界条件包括图片尚未进入视口但已预加载、以及加载失败后的回退策略。
对于响应式图片，data-srcset 与 srcset 的协同使用可以在不同屏幕密度下加载合适的资源，进一步优化带宽利用。
2. 实现图片懒加载的主流方案
浏览器原生的 loading="lazy" 提供了简单的懒加载能力，但并非所有场景都完全兼容，需要结合更灵活的方案使用。 方案对比包括实现复杂度、兼容性和可控性。
2.1 原生能力：loading 属性
在 img 标签上设置 loading="lazy" 即可让浏览器在图片进入视口前不会立即请求资源。尽管简单，但对部分旧浏览器无效，需要降级策略。原生能力的优先级需要和后备方案结合。
对于无障碍和性能指标，原生懒加载往往与占位图片和 CSS 方案一起使用，以避免内容跳动。渐进展示有助于提升用户体验。
2.2 通过 IntersectionObserver 实现
IntersectionObserver 提供高效的可观察元素进入视口的回调。相比滚动事件，它的性能更好，且可以捕捉到复杂的进入行为。核心 API是 new IntersectionObserver(callback, options)。
通过将真实资源地址放在 data-src、data-srcset 等自定义属性，进入视口时再填充到 src、srcset，以实现真正的懒加载。
2.3 兼容性与降级策略
如果浏览器不支持 IntersectionObserver，可以回退到滚动事件监听和节流，并优先尝试使用 loading 属性作为降级方案。降级策略确保不会破坏图片加载。
为了避免错过临界区域，常通过设置 rootMargin 来扩大触发区域，使图片在进入视口前就开始加载，从而提升连贯性。
3. 典型实现：代码示例与解释
下面给出一个完整的实现示例，涵盖 HTML、CSS 与 JavaScript，以及对常见坑点的说明。示例目标是最小化初始加载成本并兼容大多数浏览器。
3.1 HTML 与数据属性
图片使用 data-src 保存真实资源地址，src 设置为占位图片或空白；data-srcset 处理响应式图片。占位效果通过 base64 小图片和 CSS 实现。
<!-- HTML 示例 -->
<img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBA..." data-src="https://example.com/real.jpg"data-srcset="https://example.com/real.jpg 1x, https://example.com/real@2x.jpg 2x"alt="示例图片" />
3.2 JavaScript 实现（IntersectionObserver）
核心逻辑：选中所有带 data-src 的图片，设置观察者，当进入视口时填充 src 与 srcset，并移除属性以免重复处理。
// 3.2. IntersectionObserver 实现
const lazyImages = document.querySelectorAll('img[data-src], img[data-srcset]');const imgObserver = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (!entry.isIntersecting) return;const el = entry.target;if (el.tagName === 'IMG') {if (el.dataset.src) {el.src = el.dataset.src;}if (el.dataset.srcset) {el.srcset = el.dataset.srcset;}el.removeAttribute('data-src');el.removeAttribute('data-srcset');} else if (el.tagName === 'SOURCE') {if (el.dataset.srcset) el.srcset = el.dataset.srcset;el.removeAttribute('data-srcset');}observer.unobserve(el);});
}, { rootMargin: '200px' });lazyImages.forEach(el => imgObserver.observe(el));
3.3 使用更简单的原生 loading="lazy" 的替代方案
在无需复杂脚本时，loading 属性可以实现懒加载，但需要对旧浏览器做降级处理。组合策略包括在无妨碍用户体验的前提下使用原生能力。
// 3.3 使用原生 loading（简化示例）
<img src="placeholder.jpg" loading="lazy" alt="占位图片">
在实现中，可以把触发加载的容错参数视为“温度参数”的等效概念，即通过 rootMargin 或阈值来控制提前加载的积极性。适度的提前加载有助于提升滚动体验。
