loading="lazy"不生效主因是浏览器不支持或违反硬性条件：需Chrome 76+/Firefox 75+/Safari 15.4+，且src须为真实URL、不可动态插入、不可缺失sizes（配合srcset时）、父容器不能含transform等合成属性，首屏图片或无宽高设置也会导致降级为eager加载。
img loading="lazy" 为什么有时候不生效
原生懒加载不是“写了就一定懒”，它受浏览器支持、图片是否在视口外、是否设置了宽高、是否被 CSS 隐藏等多种因素影响。Chrome 76+、Firefox 75+、Safari 15.4+ 支持，但 Safari 对 loading="lazy" 的触发阈值更保守（比如滚动极慢时可能不触发）。
常见失效现象：<img loading="lazy"> 加载完页面就直接下载了，没等滚动到才加载。
- 图片未设置
width和height（导致布局抖动，部分浏览器会降级为 eager） - 父容器用了
display: none或visibility: hidden（浏览器无法计算位置，跳过懒加载） - 图片在
<picture>内但loading写在<source>上（无效，必须写在<img>标签上） - 使用了
position: absolute且脱离文档流，又没给祖先设contain: layout（位置不可预测，懒加载失效）
loading="lazy" 和 loading="eager" 怎么选
默认是 loading="eager"（立刻加载），loading="lazy" 是显式声明懒加载。关键不是“全用 lazy”，而是按场景判断：
- 首屏图片（如 banner、logo）—— 必须用
loading="eager"，否则可能白屏或触发 CLS（布局偏移） - 列表页中大量卡片图（如商品图、文章缩略图）—— 适合
loading="lazy" - 通过 JS 动态插入的图片（如分页加载）—— 即使写了
loading="lazy"，也建议手动调用img.decoding = "async"配合，避免阻塞渲染 - SVG 或 base64 图片—— 不需要懒加载，
loading属性会被忽略（它们本身无网络请求）
怎么验证 lazy 是否真起作用
不能只看 HTML 有没有写对，得看实际行为。最直接的方式是用 Chrome DevTools 的 Network 面板 + “Disable cache” + 滚动观察：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 刷新页面，立即筛选
Img类型请求 —— 首屏外的图不应出现在初始请求列表里 - 滚动页面，观察新请求是否随视口进入而逐批出现（注意：浏览器有预加载缓冲区，通常提前 1–2 屏加载，不是“刚好滚到才发”）
- 在 Elements 面板中右键
<img>→ “Break on” → “attribute modifications”，看src是否在滚动后才被 JS 补上（如果是，说明你代码里覆盖了原生 lazy）
错误示例：<img loading="lazy" src="" > + JS 填 src —— 这时 loading 已失效，因为浏览器只在解析 HTML 时读取该属性，后续改 src 不再走原生逻辑。
兼容性 fallback 怎么写才不冗余
不需要引入完整 IntersectionObserver polyfill 来模拟 lazy，尤其当目标浏览器已覆盖 95%+ 用户时。真正要补的只有老版本 Safari（
- 检测支持：用
"loading" in HTMLImageElement.prototype判断原生支持与否 - fallback 方案优先用
IntersectionObserver（现代方案），而不是 scroll + getBoundingClientRect（性能差、易漏帧） - 只对确实需要懒加载、且原生不支持的图片启用 JS fallback，避免所有图片都走 JS 路径
- 别在
<img>上同时写loading="lazy"和data-src—— 语义冲突，容易让团队误以为“写了 data-src 就等于懒加载”
一个轻量 fallback 示例（仅作用于不支持的环境）：
if (!("loading" in HTMLImageElement.prototype)) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
}
注意：这个逻辑只在不支持原生 loading 时运行，且要求图片带 data-src 属性 —— 这个标记本身就得靠构建时或 CMS 输出控制，不是运行时自动加的。
最容易被忽略的一点：懒加载解决的是「资源请求数」问题，不是「图片体积」问题。一张 5MB 的 loading="lazy" WebP 照样拖慢滚动体验。压缩、尺寸裁剪、格式选择，永远比加个 lazy 属性重要得多。
