优先使用原生 loading="lazy" 实现图片懒加载，仅在需支持背景图、老浏览器或监听加载状态时才用 IntersectionObserver 等 JS 方案；组件懒加载重在延迟初始化而非渲染，背景图和 CSS 图片必须 JS 替代，且须预留尺寸、处理加载态与失败回退。
浏览器原生 loading="lazy" 已覆盖绝大多数图片懒加载场景，无需 JS 就能生效；但对自定义组件、复杂交互动画或兼容老版本浏览器时，仍需手动实现。
图片懒加载：优先用 loading="lazy"，慎用 JS 方案
现代 Chrome/Firefox/Edge（≥2020）已支持 <img loading="lazy">，它由浏览器原生控制，性能好、无 JS 依赖、自动处理滚动与 Resize。但有明确限制：
-
loading="lazy"仅对<img>和<iframe>生效，不适用于背景图或 CSSurl() - 默认只对“非首屏”图片生效；若图片在视口内（如快速滚动后回拉），可能跳过懒加载
- Safari 直到 v15.4 才完整支持，旧版需降级方案
- 无法监听加载完成状态或失败重试 —— 这些得靠 JS 补足
若必须用 JS，推荐 IntersectionObserver 而非 scroll 事件：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));
React/Vue 组件懒加载：按需触发渲染，而非仅图片
组件懒加载核心是「延迟初始化」，不是等图片出现才渲染。常见误区是把组件包裹在 IntersectionObserver 里——这会导致频繁挂载/卸载，反而损害性能。
立即学习“Java免费学习笔记（深入）”；
- 对长列表中非首屏区块（如第 50 条之后的卡片），用
React.memo+useMemo缓存渲染结果，再配合IntersectionObserver控制是否render - Vue 中可用
v-intersection指令或defineAsyncComponent实现路由级组件懒加载，但注意：后者是代码分割（import()），和 DOM 可见性无关 - 真正需要“组件级懒加载”的场景极少；多数时候应优先优化单个组件内部资源（比如把图表库的初始化推迟到
ref挂载后）
背景图与 CSS 图片：没有 loading="lazy"，只能 JS 替代
CSS 背景图（background-image: url(...)）无法使用原生懒加载，必须靠 JS 注入样式或切换 class：
- 给元素加
data-bg属性存真实 URL，用IntersectionObserver触发element.style.backgroundImage = `url(${url})` - 避免直接操作
style.backgroundImage，改用 class 切换 + CSS 变量更利于复用和缓存 - 注意：CSS
image-set()或srcset语义不适用于背景图懒加载，它们只影响资源选择，不控制加载时机
.card { background-image: var(--bg-url, none); }
.card.loaded { --bg-url: url('/hero.webp'); }
容易被忽略的细节：占位、加载态、SEO 与失效回退
懒加载不是“隐藏然后突然出现”，它必须配合视觉反馈和容错机制：
- 所有懒加载图片/组件必须预留尺寸（
aspect-ratio或宽高属性），否则会引发布局偏移（CLS） -
<img>应始终带alt，即使src为空；搜索引擎仍可索引alt文本 - 当
IntersectionObserver不可用（如 IE 或禁用 JS），需 fallback 到立即加载逻辑，或至少保证内容可访问 - 图片加载失败时，
onerror回调比 CSS:not([src])更可靠，且能触发重试逻辑
最常被跳过的一步：没设 height/width 或 aspect-ratio 的懒加载图片，会在加载瞬间撑开页面，伤害用户体验和 Core Web Vitals。
