link rel="preload" 预加载图片需显式声明 as="image" 且跨域时加 crossorigin，否则静默失败；new image() 需防 onerror 死循环、cors 不触发错误、空 src 无请求及并发重复；首屏图用 eager 加载，交互图用 intersectionobserver，ssr 用 data url 占位，file:// 协议下全部失效。
预加载图片本身不报错，报错的是你用错了方式——link rel="preload" 加载图片时若未配 as="image" 或跨域未处理，Chrome 会静默失败；而用 new Image() 预加载则可能因 CORS、空 src、重复触发导致控制台报错或内存泄漏。
为什么 link rel="preload" 图片总在控制台报 warning 或不生效
浏览器对 preload 的资源类型校验极严，漏掉 as 属性是头号原因：
-
as="image"必须显式声明，写成<link rel="preload" href="banner.jpg">会被当成脚本或样式预加载，触发 warning 且实际不加载 - 若图片跨域（如 CDN），必须同步加
crossorigin属性，否则 Chrome 拒绝缓存，Network 面板显示 “(inactive)” - 预加载的 URL 必须真实存在且返回 200，404 或 302 重定向都会让 preload 失效，但控制台通常只报 warning，不报 error
- Safari（尤其 iOS 16.3 及更早）根本不支持
preload图片，会直接忽略整条link标签
new Image() 预加载报错：onerror 死循环与 CORS 静默失败
手动创建 new Image() 是最常用预加载手段，但错误写法会导致控制台刷屏或页面卡顿：
- 写成
img.onerror = () => img.src = fallback且fallback也 404 → 无限触发onerror，内存暴涨 - 未设
img.crossOrigin = "anonymous"就加载跨域图 → 控制台报 CORS 错误，但onerror不触发（这是规范行为，不是 bug） - src 赋值为空字符串、
undefined或纯空格 → 浏览器不发请求，onload/onerror全都不触发，你以为“预加载完了”，其实什么都没干 - 多个相同 URL 的
new Image()实例并发创建 → 浏览器可能去重，也可能重复请求，行为不可控
真正稳定的预加载方案：按场景选，别硬套一种
没有“通用预加载”，只有“匹配上下文的加载”：
- 首屏大图/关键 banner：直接写
<img src="hero.jpg" loading="eager">，别预加载——现代浏览器对首屏src的加载优先级已足够高 - 用户交互后才展示的图（如 hover 弹窗、tab 切换内容）：用
IntersectionObserver监听进入视口前 200px，再执行new Image().src = url，并加dataset.loaded防重 - 需确保加载完成才执行后续逻辑（如拼图、水印合成）：用
fetch(url, { method: 'HEAD' })先验 URL 可达性，成功后再走new Image()+onload，失败走 base64 降级 - SSR 场景下预加载：服务端无法执行 JS，应在 HTML 中内联一个极小的 data URL 占位图，客户端 hydration 后再替换真实图
容易被忽略的底层细节
很多报错根本不在代码里，而在协议和环境：
- 本地双击打开 HTML 文件（
file://协议）时，所有preload和new Image()都会被浏览器拦截，控制台报net::ERR_FILE_NOT_FOUND—— 必须起 HTTP 服务（如 VS Code Live Server） - 路径写
./img/cover.jpg比img/cover.jpg更稳，尤其在构建工具处理后路径可能被重写 - 图片 URL 带查询参数（如
?v=20260929）时，CDN 若未配置缓存键包含 query string，会导致预加载失效却无提示 - WebP/AVIF 图片在 Safari 15 及以下不支持，预加载了也白搭，得配合
<picture></picture>+type判断做降级
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
