17370845950

优先使用原生 loading="lazy" 实现图片懒加载，仅在需支持背景图、老浏览器或监听加载状态时才用 IntersectionObserver 等 JS 方案；组件懒加载重在延迟初始化而非渲染，背景图和 CSS 图片必须 JS 替代，且须预留尺寸、处理加载态与失败回退。

浏览器原生 loading="lazy" 已覆盖绝大多数图片懒加载场景，无需 JS 就能生效；但对自定义组件、复杂交互动画或兼容老版本浏览器时，仍需手动实现。

图片懒加载：优先用 loading="lazy"，慎用 JS 方案

现代 Chrome/Firefox/Edge（≥2025）已支持 ，它由浏览器原生控制，性能好、无 JS 依赖、自动处理滚动与 Resize。但有明确限制：

• loading="lazy" 仅对 和 生效，不适用于背景图或 CSS url()
• 默认只对“非首屏”图片生效；若图片在视口内（如快速滚动后回拉），可能跳过懒加载
• 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 里——这会导致频繁挂载/卸载，反而损害性能。

• 对长列表中非首屏区块（如第 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）
• 应始终带 alt，即使 src 为空；搜索引擎仍可索引 alt 文本
• 当 IntersectionObserver 不可用（如 IE 或禁用 JS），需 fallback 到立即加载逻辑，或至少保证内容可访问
• 图片加载失败时，onerror 回调比 CSS :not([src]) 更可靠，且能触发重试逻辑

最常被跳过的一步：没设 height/width 或 aspect-ratio 的懒加载图片，会在加载瞬间撑开页面，伤害用户体验和 Core Web Vitals。