如何实现图片预加载功能的基础用法-html教程-PHP中文网

最简可行方案是用new image()创建实例并设置src，浏览器立即发起请求并缓存；必须显式监听onload和onerror，确保路径准确、避免重复创建，且需注意移动端可见性及并发控制。

如何实现图片预加载功能的基础用法

图片预加载最简可行方案：用 `Image` 构造函数

直接 new 一个 Image 实例，设置 src，浏览器就会发起请求并缓存——这是所有预加载的底层基础，不依赖任何框架或 API。

常见错误是设了 src 却没监听 load 或 error，导致失败时完全无感知；更隐蔽的问题是把预加载逻辑写在 DOM ready 之后，但用户已经滚动到图片位置，白屏一闪就过去了。

必须显式监听 onload 和 onerror，哪怕只做空处理，否则无法判断是否就绪
路径要确保准确：相对路径以当前 HTML 为基准，不是 JS 文件所在目录
避免重复创建同一 URL 的 Image 实例，浏览器虽会复用缓存，但事件监听器不会自动共享
移动端要注意，部分 iOS WebView 在页面不可见时会暂停图片加载，可配合 visibilitychange 事件补发

const img = new Image();
img.onload = () => console.log('预加载完成');
img.onerror = () => console.error('预加载失败');
img.src = '/assets/banner.jpg'; // 立即触发请求

批量预加载时如何控制并发和顺序

一次性 new Image() 十几张图，可能触发浏览器并发连接数限制（通常 6~8 个），导致后置图片排队严重，实际加载时间反而拉长。

不用第三方库也能简单控流：用队列 + 递归调用，每次只放行固定数量（比如 3 个）同时加载，任一完成就补位下一个。

Audiobox

Audiobox是一款AI音频处理工具，Meta推出的免费AI语音和声音生成模型。

下载

fetch() + createObjectURL() 不适合纯图片预加载，它绕过浏览器图片解码缓存，后续 <img src> 仍需重新下载
不要用 Promise.all() 包裹全部 Image 加载，失败一个就全盘中断，且无法控并发
优先级很重要：首屏图应立即触发，非首屏可延迟 300ms 再进队列，避免阻塞关键资源

function preloadImages(urls, maxConcurrent = 3) {
  const queue = [...urls];
  let activeCount = 0;

  function loadNext() {
    if (queue.length === 0 && activeCount === 0) return;
    if (activeCount >= maxConcurrent || queue.length === 0) return;

    const url = queue.shift();
    activeCount++;
    const img = new Image();
    img.onload = img.onerror = () => {
      activeCount--;
      loadNext();
    };
    img.src = url;
  }

  while (activeCount  0) {
    loadNext();
  }
}