loading="lazy"生效需同时满足：浏览器支持（chrome 76+/edge 79+/firefox 75+/safari 15.4+）、src为真实url、图片初始不在视口内、父容器无transform/opacity等干扰样式、宽高明确、不能动态插入、且仅对和有效。
loading="lazy" 触发的前提条件有哪些
它不是加了就生效的开关，浏览器要同时确认几件事才会真正延迟请求：src存在、图片有可计算高度、初始渲染时不在视口内、父容器没用transform/opacity: 0/visibility: hidden等干扰样式、且不能在<picture></picture>外层写（必须写在内部的<img>上）。
常见失效现象：图片全量加载、控制台报Failed to execute 'observe' on 'IntersectionObserver'、首屏图突然空白。
-
src不能为空或占位符 URL（如data:image/gif;base64,），否则 Chrome 直接跳过懒加载逻辑 - 宽高必须明确——靠 HTML
width/height属性最稳；CSS 中用aspect-ratio+width也可，但 Safari 15.4+ 才支持 - 父容器用了
display: none？浏览器无法预估它何时可见，懒加载直接失效；可改用visibility: hidden+ 固定尺寸临时绕过
哪些场景下 loading="lazy" 会完全不工作
即使标签写对了，以下情况也会让浏览器无视该属性：
- iOS Safari 15.3 及更早版本完全不识别；微信旧版 X5 WebView 同样忽略，且不报错
- 页面通过
document.write()动态注入内容，现代浏览器虽已限制该行为，但遗留代码仍会导致懒加载被跳过 - 和 JS 懒加载库（如
lozad、LazyLoad.js）混用——Chrome 可能重复触发请求，导致图片加载两次或卡顿 - 服务端渲染（SSR）中，首屏图片被误标为
loading="lazy"，而 JS 尚未 hydration 完，可能造成白屏或闪烁
和 srcset/sizes 配合时要注意什么
loading="lazy" 和响应式图片是正交功能，但参数协同不好会出问题：
- 必须同时提供
sizes，否则浏览器无法预估当前视口宽度下的图片宽度，可能从srcset中选错资源，甚至重复请求 - 正确写法：
<img src="photo.jpg" srcset="photo-small.jpg 480w, photo-large.jpg 1024w" sizes="(max-width: 480px) 480px, 1024px" loading="lazy"> - 如果
srcset中某项路径无效，fallback 失败，图片可能不显示
为什么有些图“滚到眼前才开始加载”
原生 loading="lazy" 的提前量是浏览器内置的，约 1250px —— 这意味着用户还没滚到图片位置，浏览器就已发起请求。但如果你需要更激进的提前加载（比如 200px 就触发），它无能为力。
此时必须换 IntersectionObserver，并配 rootMargin: "200px"。另外，瀑布流中图片高度未知、或靠 JS 动态撑开的场景，原生方案容易误判位置，导致提前加载或滚动过快时出现空白。
最容易被忽略的一点：它不提供加载状态反馈，也没有失败重试机制；一旦图片 404 或网络中断，你什么都感知不到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
