HTML5如何预加载图片_HTML5预加载图片方法【优化】_技术教程

HTML5无专用预加载标签，但可用（最标准）或JS Image对象（运行时控制）实现；禁用display:none伪预加载和prefetch（不适用图片）。

HTML5 本身没有专门的预加载语义标签，但有多个可靠、现代且被广泛支持的方式实现图片预加载——关键看你要预加载的时机和控制粒度。

用提前获取关键图片

这是最标准、最可控的 HTML5 原生方案，适用于你明确知道某张图片将在首屏或关键交互中立即用到（比如 banner 背景图、首帧头像）。

它让浏览器在解析 HTML 早期就发起请求，不阻塞渲染，也不触发解码，比 JS 创建 Image 对象更早、更轻量。

as="image" 必须指定，否则浏览器可能忽略或降级为 fetch 优先级
fetchpriority="high" 可选，进一步提示重要性（Chrome 101+ 支持）
路径必须是绝对或相对于当前页面的合法 URL；相对路径不能以 // 开头（会被当成协议缺失）
不支持动态生成的 URL，也不能带 JS 表达式

用 JavaScript 的 `Image` 对象手动预加载

适合需要运行时判断、按条件加载、或加载大量非关键图片（如相册下一页缩略图）的场景。兼容性极好，所有浏览器都支持。

注意：它不会自动插入 DOM，只是下载并缓存；但若图片已存在于缓存，onload 会同步触发，需做好状态管理。

务必设置 img.src 后再绑定 onload / onerror，否则可能错过事件
避免重复创建相同 src 的 Image 实例，可加简单缓存 Map
大批量预加载时建议节流或分批，防止瞬时并发过多请求（尤其在弱网下）

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; // ⚠️ 这行必须在绑定事件之后、之前设置
  });
};

preloadImage('/assets/thumb-01.jpg').then(() => console.log('loaded'));