预加载图片只有两种可靠方式：一是用于确定首屏立即展示的图，须置于且路径静态；二是new image()用于运行时判断场景，需先绑定事件再赋值src并控制并发。
预加载图片不是靠 <img> 标签加个属性就能自动完成的，浏览器不会因为你写了 loading="eager" 就提前发起请求。真要“提前下载进缓存”，只有两种靠谱路径：<link rel="preload"> 声明式预加载，或用 new Image() 主动触发。选哪种，取决于你是否知道这张图在哪儿、什么时候用。
什么时候用 <link rel="preload">
适用于你**确定某张图会在首屏或用户进入页面后立刻展示**的场景，比如 banner、logo、登录页主视觉图。它不渲染、不占布局，只告诉浏览器：“这个资源马上要用，请优先下载。”
-
as="image"必须写，缺了它浏览器会当成普通 fetch 处理，可能跳过图片专属的缓存和解码优化 - 必须放在
里，且越早越好；动态插入（比如 JS 创建后 append）无效 -
href必须是静态路径，不能含 JS 变量、模板语法，例如href="/assets/${name}.webp"会被当字面量请求，大概率 404 - 相对路径以 HTML 文件位置为基准，别写成
./images/hero.jpg却把 HTML 放在/user/profile.html下 - 可加
fetchpriority="high"（Chrome 101+），提升请求优先级；旧版忽略，无副作用
什么时候用 new Image()
适用于需要运行时判断的场景：比如用户 hover 按钮后预加载下一页图、按 window.devicePixelRatio 选择 @2x 版本、轮播图只预载当前 + 相邻 1–2 张。
- 必须先绑定
onload和onerror，再赋值src；否则缓存命中时事件同步触发，回调直接被跳过 - 要检查
img.complete：如果为true，说明已缓存，需立刻执行成功逻辑 - 避免在循环里密集
new Image()—— 浏览器并发请求数通常只有 6~8 个，建议用 Promise 控制并发（如每次最多 4 个） - URL 必须完全一致：预加载用
slide-1.jpg?v=202609，后续切换时也得用一模一样的 URL，否则缓存不命中
哪些做法根本不算预加载
常见误解集中在这三类，它们要么延迟加载、要么干扰渲染、要么无法监听状态：
-
loading="lazy"是推迟加载，Chrome 会等到滚动前 500px 才发请求，和“提前”目标相反 -
<img src="..." style="max-width:90%">或 CSSbackground-image配负偏移：这些会随页面初始渲染一起触发下载，无法控制优先级，还可能拖慢首屏 -
<link rel="prefetch">是为“未来导航”准备的，优先级远低于preload，且浏览器可能直接忽略
真正难的不是写几行代码，而是判断哪张图值得预加载、何时触发、是否带参数、有没有并发节流——这些细节没对齐，preload 写得再标准也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
