预加载弹窗图片需提前拉入缓存，而非仅隐藏DOM：①用<link rel="preload" as="image">声明关键图，注意路径、fetchpriority和避免与lazy冲突；②用new Image()动态预加载，需先绑事件再赋值src，并控制并发与清理内存；③弹窗img应延迟设src，禁用background-image，WebP需格式fallback。
预加载弹窗图片，不是把图片塞进隐藏的 <dialog> 或加 display: none 就完事——那样只是“藏起来”，不是“提前加载”。真要让弹窗一打开就秒出高清图，得在用户点开前就把图拉进缓存。核心就两条路：<link rel="preload"> 声明关键图，或用 new Image() 主动触发加载。
用 <link rel="preload"> 预载弹窗主图
适合你明确知道哪张图会出现在弹窗里（比如 banner、产品主图、登录页大图），且它属于首屏关键资源。
-
as="image"必须写，缺了浏览器当普通 fetch 处理，不走图片解码/缓存流程 -
href要用绝对路径或根相对路径（如/assets/detail.webp），别写./images/—— HTML 放在子目录时会 404 -
fetchpriority="high"在 Chrome 109+ 有效，能抢在其他非关键请求前下载；旧版忽略无副作用 - 别和
loading="lazy"同时用，逻辑冲突：一个要提前拿，一个要拖到滚动才拿
示例放在 <head> 里：
<link rel="preload" as="image" href="/assets/product-hero.webp" fetchpriority="high">
用 new Image() 按需预加载弹窗图
适合弹窗内容动态生成（比如相册第 5 张、用户 hover 后才决定加载哪张 @2x 图），或需要监听成功/失败状态。
立即学习“前端免费学习笔记（深入）”；
- 必须先绑定
onload/onerror，再赋值src，否则缓存命中时事件直接同步触发，回调被跳过 - 加载前检查
img.complete：若为true，说明已缓存，立刻执行成功逻辑，别等 onload - 避免循环里密集
new Image()—— 浏览器并发请求数通常卡在 6~8 个，建议用 Promise 队列控制（如每次最多 4 个） - 大量预加载后记得清理：设
img.src = ''或丢弃引用，防内存滞留
基础封装示例：
const preloadImage = (url) => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = () => reject(new Error(`Failed to load ${url}`));
img.src = url;
});
};
弹窗里 <img> 的 src 别乱设
很多人把弹窗 DOM 一次性渲染好，<img src="..."> 写死在里面，结果弹窗一 show 就卡顿、白屏、甚至报错。
- 弹窗默认
display: none或visibility: hidden时，loading="lazy"会失效（IntersectionObserver 不触发），图片压根不加载 - 正确做法：弹窗 DOM 初始化时不设
src，等showModal()或classList.add('open')后，再动态赋值modalImg.src = url - 如果用了
loading="eager"，部分旧版 Safari 不支持，降级为不写该属性更稳妥 - 别用
background-image替代<img>—— 打印、右键保存、object-fit、响应式都废
最容易被忽略的一点：WebP 预加载必须配 fallback。只写 <link rel="preload" href="a.webp">，Safari 或老 Chrome 会直接 404，得靠 JS 检测格式支持，或服务端做 Accept 头协商。否则用户点开弹窗，看到的是一片空白。
