17370845950

现代浏览器原生懒加载推荐使用loading="lazy"属性，仅适用于和，需配合width/height防CLS，首屏图应设eager；响应式图片用+srcset按设备选最小合适资源；精细控制可用Intersection Observer；WebP/AVIF格式与CDN缓存协同优化才是关键。

图片懒加载（Lazy Loading）必须用 loading="lazy"

现代浏览器原生支持的懒加载是最轻量、兼容性足够（Chrome 76+、Firefox 75+、Safari 15.4+）

的方案，不需要 JS 库也能生效。关键在于给 标签加上 loading="lazy" 属性，浏览器会自动在图片进入视口前不发起请求。

注意：loading="lazy" 对 background-image 无效，只作用于 和 ；首屏关键图建议保留 loading="eager" 或直接省略该属性，避免被误懒加载。

• 必须确保图片有明确的 width 和 height（或使用 aspect-ratio），否则懒加载可能引发布局偏移（CLS）
• 服务端渲染（SSR）页面中，若 HTML 初始就含大量带 loading="lazy" 的 ，部分爬虫仍会预抓取，但真实用户侧资源节省明显
• 不推荐同时叠加 JS 懒加载库（如 lozad.js），会造成冗余判断和潜在冲突

CSS 中用 @media 配合 picture + srcset 减少单图体积

按屏加载不只是“延迟”，更是“按需提供合适尺寸”。靠纯 CSS 无法切换图片源，但可以联合 HTML 的 和 srcset，让浏览器根据设备像素比、视口宽度等自主选择最小够用的资源。

例如：小屏手机只需 400px 宽的图，桌面端才加载 1200px 版本。CSS 本身不下载图片，但能通过媒体查询控制 的匹配逻辑。

  
  
  @@##@@

• media 属性值必须是有效 CSS 媒体查询，不能写 JS 表达式
• srcset 中的描述符（如 400w）要与 的 media 协同，否则浏览器可能忽略匹配
• 务必为每个 和 设置 width/height，否则响应式缩放时易失真或重绘

用 Intersection Observer 替代 scroll 事件做自定义懒加载

当需要更精细控制（比如提前 200px 加载、或配合动画入场），原生 loading="lazy" 不够用，就得用 Intersection Observer API。它比监听 scroll 事件性能好得多，不会触发强制同步布局。

核心逻辑：观察图片是否进入视口，一旦 isIntersecting === true，就把 data-src 赋给 src，再调用 observer.unobserve() 避免重复触发。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
}, { rootMargin: '200px' });

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

• rootMargin 设为 '200px' 可实现“提前加载”，避免滚动过快时出现空白
• 务必在 img.src 赋值后移除 data-src，否则刷新页面可能重复加载
• 服务端若启用了 HTTP/2 Server Push，对懒加载图片无效，因为推送发生在 HTML 解析前，无法按视口动态决策

WebP / AVIF 格式 + CDN 缓存策略才是加载提速的隐藏关键

按屏加载解决的是“何时下载”，但“下载什么”同样重要。同一张图，WebP 比 JPEG 小 30%、AVIF 再小 20%，且现代浏览器支持良好（Chrome/Firefox/Edge 全支持，Safari 16.4+ 支持 AVIF）。格式转换后，CDN 缓存命中率也会显著提升。

实际落地时，不要手动替换所有 src，而是用构建工具（如 Webpack 的 image-minimizer-webpack-plugin）或 CDN 自动转码（Cloudflare Image Resizing、Cloudinary 的 f=webp 参数）。

• 使用 回退时， 必须放在最前面，否则低版本浏览器会跳过后续格式
• CDN 开启缓存需确认 Cache-Control 头包含 public, max-age=31536000（1年），并确保图片 URL 带哈希指纹（如 cat.a1b2c3.webp），避免更新后缓存不刷新
• 本地开发时，浏览器 DevTools 的 Network 面板要勾选 “Disable cache”，否则可能误判懒加载是否生效

真正卡顿往往不是懒加载没开，而是图片没压缩、没分屏适配、或 CDN 缓存未生效。三者缺一，光靠 loading="lazy" 也救不了首屏时间。