动态预加载必须用JavaScript，因link rel="preload"不支持变量；new Image()是唯一可控方式，需先绑定onload/onerror再赋值src，并检查img.complete；须控制并发数防请求堆积，WebP预加载需手动fallback。

动态预加载必须用 JavaScript，link rel="preload" 不支持变量

HTML 的 <link rel="preload"> 是静态声明，href 值在页面解析时就固定了，不能写 href="/images/${id}.webp" 或拼接 JS 变量——浏览器会当字面量请求，大概率 404。真要按运行时逻辑（比如用户选中商品后预载详情图、轮播切换前预载下一张）加载，只能靠 JS 主动发起。

new Image() 是唯一可控方式，但事件绑定顺序不能错

常见错误是先赋值 src 再绑 onload，结果缓存命中时事件同步触发，回调直接被跳过。正确顺序必须是：

• 先创建 new Image()
• 立刻绑定 onload 和 onerror
• 再赋值 src
• 额外检查 img.complete === true：若为真，说明已缓存，需手动执行成功逻辑

并发太多会卡住，得加节流或队列

浏览器对同一域名的并发请求数有限制（通常 6~8 个），如果一次触发几十张图的 new Image()，后面请求会被挂起，反而拖慢整体速度。实际项目里建议：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 用 Promise 控制并发数，例如每次最多 4 个同时加载
• 避免在 for 循环里密集 new Image()，改用 Promise.allSettled() 包裹批处理
• 大量预加载后不保留引用，让 GC 回收；若挂到全局或闭包里，记得清空 src = ''

WebP 预加载必须带 fallback，且不能只靠 loading="lazy"

很多人误以为给 <img loading="lazy"> 加个 src 就算“预”了，其实它只是延迟加载，和预加载目标完全相反。WebP 动态预加载还要注意：

立即学习“前端免费学习笔记（深入）”；

• JS 中用 new Image() 加载 WebP 路径时，失败不会抛异常，必须靠 onerror 捕获
• 若需兼容不支持 WebP 的旧浏览器，得在 onerror 里降级加载 JPG/PNG
• 不要指望 <picture> 里的 source 在 JS 预加载时自动 fallback——它只对渲染生效，预加载得自己写逻辑

动态预加载的核心其实是「时机控制」和「失败兜底」，不是简单 new 一个对象就完事。最容易被忽略的是缓存命中时的 complete 判断，以及并发失控导致的请求堆积。