loading="lazy" 仅对同时满足src属性存在、有可计算高度、不在首屏内、父容器无干扰样式、且不位于外的生效；常见失效原因包括未设宽高、display:none、浏览器禁用、document.write()注入及与js懒加载库混用。
loading="lazy" 不是加了就生效的开关，它依赖浏览器对布局、可见性、资源地址的综合判断。用错地方或缺关键条件，Chrome 会直接忽略它，当成普通 <img> 处理。
哪些 <img> 能真正触发懒加载
只对同时满足以下全部条件的图片有效：
-
<img>标签必须有明确的src（不能只靠data-src），浏览器需要真实 URL 才能发起延迟请求 - 图片必须有可计算的高度——通过
width和height属性，或 CSS 中设置了固定尺寸（如height: 200px或aspect-ratio: 16/9） - 图片不在首屏内（即初始渲染时不可见），且父容器没用
transform、opacity: 0、visibility: hidden等干扰布局可见性判断的样式 - 不在
<picture></picture>内部——如果用了<picture></picture>，loading="lazy"必须写在内部的<img>上，而不是<picture></picture>标签上
loading="lazy" 常见失效原因
遇到“加了但图片还是全量加载”，先检查这些硬性限制：
- 浏览器控制台报错
Failed to execute 'observe' on 'IntersectionObserver'？大概率是图片没设宽高，Safari 和部分旧版 Chrome 会直接跳过懒加载逻辑 - 图片在
display: none的容器里？loading="lazy"会失效——因为浏览器无法预估它何时可能进入视口；改用visibility: hidden+ 固定尺寸可临时绕过 - 用户禁用了该功能：Chrome 设置中关闭了 “Enable lazy image loading”，或使用 Safari 15.3 及更早版本（稳定支持从 15.4 开始）
- 页面用了
document.write()动态注入内容？现代浏览器已限制该行为，但遗留代码仍可能导致懒加载被跳过
和 JS 懒加载库（如 lozad）能不能共存
不能混用。一旦引入 lozad、LazyLoad.js 这类库，就必须移除所有 loading="lazy" 属性：
- Chrome 在检测到
loading="lazy"同时又监听了 IntersectionObserver，可能重复触发请求，导致图片加载两次或卡顿 - JS 库通常接管了
data-src→src的赋值流程，原生懒加载机制反而会干扰这个过程 - 如果要用 JS 方案，优先选 Intersection Observer API（不用第三方库），它性能更好、兼容性更可控（Firefox 75+、Edge 79+、Safari 15.4+ 都支持）
最易被忽略的一点：懒加载不是“等用户滚到图片才开始下载”，而是浏览器根据滚动预测提前约 1250px 加载——如果你需要更激进的提前量（比如 200px 就加载），loading="lazy" 无能为力，必须换 Intersection Observer 并配 rootMargin。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
