现代浏览器原生懒加载推荐使用loading="lazy"属性，仅适用于<img>和<iframe>，需配合width/height防CLS，首屏图应设eager；响应式图片用<picture>+srcset按设备选最小合适资源；精细控制可用Intersection Observer；WebP/AVIF格式与CDN缓存协同优化才是关键。
图片懒加载（Lazy Loading）必须用 loading="lazy"
现代浏览器原生支持的懒加载是最轻量、兼容性足够（Chrome 76+、Firefox 75+、Safari 15.4+）的方案，不需要 JS 库也能生效。关键在于给 <img> 标签加上 loading="lazy" 属性，浏览器会自动在图片进入视口前不发起请求。
注意：loading="lazy" 对 background-image 无效，只作用于 <img> 和 <iframe>；首屏关键图建议保留 loading="eager" 或直接省略该属性，避免被误懒加载。
- 必须确保图片有明确的
width和height（或使用aspect-ratio），否则懒加载可能引发布局偏移（CLS） - 服务端渲染（SSR）页面中，若 HTML 初始就含大量带
loading="lazy"的<img>，部分爬虫仍会预抓取，但真实用户侧资源节省明显 - 不推荐同时叠加 JS 懒加载库（如
lozad.js），会造成冗余判断和潜在冲突
CSS 中用 @media 配合 picture + srcset 减少单图体积
按屏加载不只是“延迟”，更是“按需提供合适尺寸”。靠纯 CSS 无法切换图片源，但可以联合 HTML 的 <picture> 和 srcset，让浏览器根据设备像素比、视口宽度等自主选择最小够用的资源。
例如：小屏手机只需 400px 宽的图，桌面端才加载 1200px 版本。CSS 本身不下载图片，但能通过媒体查询控制 <source> 的匹配逻辑。
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(max-width: 480px)" srcset="cat-400.jpg" width="400" height="300"> <source media="(max-width: 768px)" srcset="cat-800.jpg" width="800" height="600"> <img src="cat-1200.jpg" alt="Cat" width="1200" height="900"> </picture>
-
media属性值必须是有效 CSS 媒体查询，不能写 JS 表达式 -
srcset中的描述符（如400w）要与<source>的media协同，否则浏览器可能忽略匹配 - 务必为每个
<source>和<img>设置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 参数）。
- 使用
<picture>回退时，<source type="image/avif">必须放在最前面，否则低版本浏览器会跳过后续格式 - CDN 开启缓存需确认
Cache-Control头包含public, max-age=31536000（1年），并确保图片 URL 带哈希指纹（如cat.a1b2c3.webp），避免更新后缓存不刷新 - 本地开发时，浏览器 DevTools 的 Network 面板要勾选 “Disable cache”，否则可能误判懒加载是否生效
loading="lazy" 也救不了首屏时间。 
