按钮状态图预加载必须用<link rel="preload">或new Image()主动触发，禁用CSS伪预加载；URL须字面量一致、路径准确、as="image"必写；WebP需配PNG fallback；new Image()须先绑事件再赋值src，并控制并发数。
按钮状态图片（比如 hover、active、disabled 对应的不同背景图）必须在用户交互前就进缓存，否则首次悬停时会闪一下或延迟渲染。真预加载不是靠 loading="lazy" 或 CSS display: none 伪装，得用浏览器能识别的资源声明或 JS 主动触发。
用 <link rel="preload"> 预载关键状态图
适用于你明确知道哪些状态图会在首屏立即用到（比如登录按钮的 normal/hover/active 三态），且路径固定、不带运行时参数。
-
as="image"必须写，否则浏览器不会按图片逻辑设置缓存头和解码策略 - 路径必须是绝对路径或基于 HTML 文档位置的准确相对路径，不能含模板变量（如
"/btn-login-${state}.png"） - 要写在
<head>最早位置，动态插入无效 - 如果用了 WebP，记得 fallback：
<link rel="preload" as="image" href="/btn-login-hover.webp" type="image/webp">+ 同名 PNG 的 preload（浏览器会忽略不支持的 type，但需确保至少一个命中）
用 new Image() 预载动态/条件状态图
适合按钮状态图由 JS 控制加载时机的场景，比如根据设备像素比选 @2x 版本，或只在用户进入表单区域后才预载提交按钮的全部状态图。
- 必须先绑定
onload/onerror，再赋值src，否则缓存命中时事件同步触发，回调直接跳过 - 检查
img.complete === true，为 true 说明已缓存，可立刻执行成功逻辑 - 避免在初始化阶段密集创建多个
Image实例——浏览器并发请求数通常卡在 6~8 个，建议用 Promise.all 控制并发数（如每次最多 3 个） - URL 必须和最终按钮实际使用的完全一致（包括 query 参数），否则缓存不命中，白预加载
别把 CSS background 伪预加载当真用
用 .btn:hover { background: url(...) } 或提前在隐藏元素上设 background，并不能可靠预加载——它依赖 CSS 解析和应用时机，且无法监听是否成功、无法控制优先级。
立即学习“前端免费学习笔记（深入）”；
- 浏览器可能延迟加载该 background 图，尤其在低优先级样式表中
- 没有
onerror回调，失败静默，你根本不知道图挂了 - 若按钮用的是
<button><img></button>结构，background 方式完全不生效 - 就算加了
display: none，也改变不了请求发起时机不可控的事实
按钮状态图预加载最容易被忽略的点
状态图 URL 和最终渲染时的 URL 必须字面量一致；<link rel="preload"> 不支持任何 JS 变量或构建时注入；new Image() 创建后不赋 src 就等于没发起请求；所有预加载都绕不开浏览器并发限制，盲目堆数量反而拖慢关键资源。
