预加载图片失效的主因是未被浏览器预扫描器识别，最直接证据是Network面板中无High优先级请求或Initiated By显示为“Other”而非“Preload Scanner”；根本原因包括标签位置靠后、被阻塞脚本中断、缺少as="image"或href、服务端响应异常（如MIME错误、403/404）、图片嵌套过深或位于惰性容器内，四者缺一不可。
预加载图片失效，不是没写 <link rel="preload">，而是浏览器压根没发起请求——最直接证据是 Network 面板里找不到 high 优先级的图片请求，或 Initiated By 显示为 “Other” 而非 “Preload Scanner”。
为什么 <link rel="preload"> 没被扫描到
预扫描器只线性读取 开头附近的字节流，一旦遇到阻塞就终止。它不解析 DOM，也不执行 JS。
-
<script></script>标签没加defer或async，且放在<link rel="preload">前面 → 扫描立刻停止 -
<link rel="preload">写在<script src="vendor.js"></script>后面 → 大概率被跳过 - 内联
<script></script>体积超过 ~1KB（比如塞了大量初始化 JSON）→ 卡住扫描流 -
<link rel="preload">被注释、<meta>或其他标签隔开，离起始越远，被识别概率越低 - 写了
as="image"但漏了href，或href是空字符串/变量未渲染 → 生成的是无效标签
<link rel="preload"> 写对了但 Priority 仍是 Medium
即使标签存在且位置正确，浏览器也可能降级处理，常见于参数缺失或语义错误。
- 漏掉
as="image"→ 浏览器当普通 fetch，不启用图片缓存策略，Priority 降为 Medium -
crossorigin属性写了但服务端没返回Access-Control-Allow-Origin→ 请求静默失败，Network 里可能显示 0B 响应 -
href指向的路径返回非 200（如 404、302 重定向、403 权限拒绝）→ 预加载失败但无控制台报错 - 目标图片 MIME 类型错误（如服务器返回
text/plain却声称是image/webp）→ Chrome 会丢弃资源，不触发 error
关键图仍不进 LCP 候选，Initiated By 是 “Other”
说明预扫描器根本没把它当首屏关键资源，哪怕你 preload 了，也晚于浏览器自己发现的时机。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 图片包在深度 ≥6 层嵌套中（如
<div><div><div><div><div><div><img src="hero.jpg" alt="HTML预加载图片失效怎么排查" ></div></div></div></div></div></div>）→ 预扫描器主动截断，不识别 - 图片在
<picture></picture>里，但外层<img alt="HTML预加载图片失效怎么排查" >没写src（只靠<source></source>）→ 预扫描器只认最外层src，fallback 缺失即失效 - 图片在
<details></details>、<dialog></dialog>、<slot></slot>这类惰性容器内 → 几乎 100% 被忽略 - 服务端渲染用
v-if/*ngIf/{isLoaded && <img alt="HTML预加载图片失效怎么排查" >}动态输出 → 初始 HTML 字节流里没有该<img alt="HTML预加载图片失效怎么排查" >，预扫描器无从响应 - 首屏图片用了
loading="lazy"→ Safari iOS 16.3 及更早可能真延迟请求，导致 LCP 暴跌
怎么验证是否真生效
别只看代码有没有，要盯 Network 面板里真实行为。
- 刷新页面后，在 Network 面板过滤
img，找对应图片请求 → 看Priority是否为High，Initiated By是否为Preload Scanner - 右键图片请求 → “Copy” → “Copy link address”，粘贴到新标签页直连 → 确认返回 200 且 Content-Type 正确
- 禁用 JS 后刷新，再看图片是否仍被预加载 → 排除 JS 干扰，聚焦预扫描行为
- 用
document.createElement('link')动态插入 preload → 不会被预扫描器识别，仅用于运行时补救，不能替代静态声明
真正卡点不在“有没有加 preload”，而在“它是否在 HTML 解析第一毫秒就被扫描到、且 href 指向一个能立刻返回 200 的有效地址”。位置、参数、嵌套结构、服务端响应，四者缺一不可；任何一个环节松动，预加载就退化成普通请求。
