图片预加载在Safari正常但Chrome重复请求问题排查

你的需求很明确：预加载数组里的24张图片，点击按钮时即时显示一张随机图，再次点击切换另一张。这段代码在Safari和Firefox里都能正常工作，但Chrome里却出了问题——页面加载时明明已经预加载完所有图片，点击按钮切换时却还要重新发起GET请求加载图片，这确实挺让人困惑的。

先贴一下你的原代码方便参考：

let randomImage = new Array(24); 
function preload() { 
  for (let x = 1; x < randomImage.length; x++) { 
    randomImage[x] = "img/img" + x + ".jpg"; 
  } 
  for (let i = 1; i < randomImage.length; ++i) { 
    let img = new Image(); 
    img.src = randomImage[i]; 
  } 
} 
function randomImg() { 
  let random = Math.floor(Math.random() * randomImage.length); 
  if (random === 0) { 
    return randomImage[1]; 
  } 
  document.getElementById("img_placeholder").src = randomImage[random]; 
}

从你描述的请求情况来看：

• 页面加载时，所有24张图片都已成功完成请求（状态码200）
• 点击按钮切换图片时，Chrome会对选中的随机图片再次发起新的GET请求，而非直接使用已预加载的缓存资源

问题根源 #

问题出在你预加载图片的方式上：你在preload函数里创建了Image实例并设置了src，但这些Image对象都是局部变量——函数执行完毕后，这些变量就失去了引用，会被JavaScript的垃圾回收机制标记为可回收。

Chrome的内存缓存策略和Safari、Firefox有差异：当没有活跃的引用指向已加载的图片资源时，Chrome会倾向于将其从内存缓存中释放，导致后续需要使用时不得不重新请求；而Safari和Firefox会更持久地保留这些缓存资源，哪怕没有代码引用。

解决办法 #

这里给你两种可行的解决方案，你可以根据自己的场景选择：

方案一：保留预加载Image对象的引用

把预加载的Image对象存储在全局数组里，让浏览器知道这些资源还有活跃的引用，不会轻易回收内存缓存。修改后的代码如下：

// 全局数组存储预加载的Image对象，而非图片路径
let preloadedImages = [];
// 用常量定义图片总数，方便后续维护
const IMAGE_TOTAL = 24;

function preload() {
  for (let x = 1; x <= IMAGE_TOTAL; x++) {
    const img = new Image();
    img.src = `img/img${x}.jpg`;
    preloadedImages.push(img);
  }
}

function randomImg() {
  // 直接生成1到24之间的随机数，避免处理0的情况
  const randomIndex = Math.floor(Math.random() * IMAGE_TOTAL) + 1;
  // 从预加载的数组中取对应图片的src赋值给占位符
  document.getElementById("img_placeholder").src = preloadedImages[randomIndex - 1].src;
}

方案二：使用<link rel="preload">标签预加载（更推荐）

这是现代浏览器推荐的预加载方式，直接通过HTML标签告诉浏览器提前加载指定资源，不受JS变量引用的影响，浏览器会主动缓存这些资源：

你可以直接在HTML的<head>里手动添加这些标签：

<link rel="preload" href="img/img1.jpg" as="image">
<link rel="preload" href="img/img2.jpg" as="image">
<!-- ... 依次添加到img24.jpg -->

如果图片数量多，也可以用JS动态生成：

function preload() {
  const IMAGE_TOTAL = 24;
  for (let x = 1; x <= IMAGE_TOTAL; x++) {
    const link = document.createElement('link');
    link.rel = 'preload';
    link.href = `img/img${x}.jpg`;
    link.as = 'image';
    document.head.appendChild(link);
  }
}

这种方式下，你的randomImg函数可以保持原来的逻辑（直接设置图片路径），浏览器会自动从缓存中读取资源，不会重复发起请求。

额外检查 #

最后可以确认一下Chrome的缓存设置：打开开发者工具的Network面板，确保「Disable cache」选项没有被勾选，这个选项会强制浏览器不使用缓存，也可能导致重复请求。

内容的提问来源于stack exchange，提问作者shomsky