loading="eager" 并非绝对强制立即加载，其生效需同时满足 src 为合法非空地址、dom 可渲染、浏览器策略允许；失效常见于 src 缺失/非法、css 隐藏、iframe 限制或低功耗模式。
loading="eager" 本身已是强制立即加载，但可能被浏览器忽略
设置 loading="eager" 的本意就是绕过懒加载机制、让图片在 HTML 解析时就发起请求。但它不是“绝对强制”——现代浏览器（尤其是 Chrome 90+）会在某些场景下**无视该属性**，比如：
当图片位于视口外且页面启用了全局懒加载策略（如通过 <meta name="viewport"> 配合某些框架行为），或页面被标记为“低功耗模式”时。
为什么设置了 eager 还没加载？常见干扰因素
实际调试中，loading="eager" 失效往往和以下情况有关：
-
img标签缺少src或srcset，只写了loading="eager"—— 没有资源地址，自然不发请求 - 使用了
src但值为空字符串、空格或非法 URL（如src=""），浏览器会跳过加载 - 图片被 CSS 隐藏（
display: none或visibility: hidden），部分浏览器会延迟加载，哪怕loading="eager" - 页面在 iframe 中加载，且父页面设置了
document.featurePolicy或Permissions-Policy限制图像加载
真正能触发立即加载的最小可靠写法
仅靠 loading="eager" 不够，必须配合可解析、非空、合法的资源地址，并确保 DOM 状态允许渲染：
@@##@@
关键点：
-
src必须是有效相对或绝对路径，不能是占位符（如src="data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs"这类 base64 占位图不算“真实资源”，浏览器仍可能推迟解码 - 避免在 JS 中动态设置
src后再补loading="eager"—— 属性必须与src同时存在，否则浏览器按初始状态判断 - 如果用
srcset，需确保至少一个source有明确media匹配或默认项，否则 fallback 可能失效
替代方案：JS 主动触发加载（当 eager 不生效时）
若确认 loading="eager" 被忽略（可通过 DevTools Network 面板观察请求时机），可退而求其次，在 DOM ready 后手动设置 src：
const img = document.querySelector('img[data-eager]');
img.src = img.dataset.src; // 提前存好真实地址
img.removeAttribute('data-src');
注意：
- 不要用
img.src = img.src触发重载 —— 现代浏览器会缓存并跳过重复请求 - 避免在
DOMContentLoaded前操作src，否则可能被浏览器预加载器覆盖 - 此方式绕过了原生 lazyload 逻辑，但会失去
decode()等 API 的优化调度能力
loading 属性本身，而是它和 src、DOM 生命周期、浏览器策略三者的共同作用。很多“没加载”问题，其实出在 src 写错了，或者你以为它在加载，其实只是浏览器把解码/渲染延迟到了首帧之后。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
