loading="lazy" 失效主因是浏览器降级为eager，仅对初始html中存在、不在首屏、有明确宽高、父容器无transform/overflow干扰的img生效；常见失效包括缺宽高、js动态插入、写在source上、置于table内。
loading="lazy" 为什么写了却没效果
加了 loading="lazy" 但图片还是全量加载，大概率不是写错了，而是浏览器直接降级为 loading="eager"。它只对「初始 HTML 就存在、不在首屏、有明确宽高、父容器没干扰样式」的 <img> 生效。
常见失效场景：
-
<img>缺少width和height（或未用 CSSaspect-ratio推断尺寸），Safari 可能直接跳过懒加载 - 父容器用了
transform、overflow: hidden或will-change: transform，破坏滚动根检测 - 图片是 JS 动态插入的（React/Vue 渲染、
innerHTML注入），不属于初始 DOM，原生懒加载不识别 - 错把
loading="lazy"写在<source></source>上——该属性只对最内层<img>有效 - 图片放在
<table> 里（<code><td> 中），Chrome 基本不触发懒加载 <h3>真正能用的最小占位图 HTML 写法</h3> <p>如果必须用内联方式（CMS/模板限制），这个结构才稳定：</p> <pre class="brush:php;toolbar:false;">@@##@@" loading="lazy" width="320" height="240" alt="描述文字"></pre> <p>关键点：</p> <ul> <li>用 SVG Base64 占位（<code>src="data:image/svg+xml,..."）——体积小、无请求、不触发错误 - 真实地址存
data-src，不是src，避免初始请求 - 必须带
width/height或 CSSaspect-ratio，否则布局抖动+懒加载失效 -
alt不可省，既是无障碍基础，也是 fallback 文案
onerror fallback 为什么经常不显示
onerror 失效不是 JS 问题，而是浏览器阻止了二次错误：第一次加载失败后，this.src='fallback.jpg' 触发第二次请求，若 fallback 路径也错，浏览器静默丢弃第二次 onerror。
稳定写法必须含 this.onerror=null：
@@##@@
注意：
- fallback 路径必须是绝对路径（如
/assets/...）或明确可访问的相对路径（如../images/...） - 推荐用
.svg占位图——无渲染失败风险，天然透明，体积通常 - 不要依赖内联
onerror做核心 fallback；真正要兜底，得用 JS 统一监听 +IntersectionObserver补充
需要提前加载？别用 loading="lazy"
原生 loading="lazy" 没有偏移配置项，它只在图片进入视口时才开始预取（阈值固定，约 1250px 下方）。如果想“离视口还有 200px 就加载”，必须换方案。
用 IntersectionObserver 手动控制：
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' } // ← 提前 200px 加载
);
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
HTML 配合写：
@@##@@
要点：
-
rootMargin: '200px'表示上下各扩展 200px，图片离视口还有 200px 就触发 - 支持写成
'100px 0px 200px'（上右下左），适配固定 header 等场景 - 务必设宽高，否则
getBoundingClientRect()计算不准，observer 可能漏触发
真正容易被忽略的是：所有这些方案都依赖图片在初始 HTML 中存在。JS 动态插入的 <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20 style="max-width:90%"%20 style="max-width:90%"/>%EF%BC%8C%E6%97%A0%E8%AE%BA%E6%80%8E%E4%B9%88%E5%86%99%20loading%20%E6%88%96%E7%BB%91%E5%AE%9A%20observer%EF%BC%8C%E9%83%BD%E5%BE%97%E6%89%8B%E5%8A%A8%E8%B0%83%E7%94%A8%20observer.observe()%EF%BC%8C%E5%90%A6%E5%88%99%E6%A0%B9%E6%9C%AC%E4%B8%8D%E4%BC%9A%E8%BF%9B%E9%98%9F%E5%88%97%E3%80%82
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
