Web性能问题：循环切换4张图片产生过多请求，如何预加载到内存？

你遇到的重复请求问题，本质是每次切换背景图时，浏览器都会尝试重新获取图片资源（即便有缓存，初次切换时也可能触发额外请求）。要彻底解决这个问题，我们可以提前把所有图片预加载到浏览器内存中，后续切换时直接调用内存里的资源，就不会再发起新请求了。

具体实现方案 #

我们可以通过创建隐藏的Image对象数组，提前加载所有目标图片：

var urls = [ 
  '/assets/img/topcatchimage/top-catiimg01.jpg', 
  '/assets/img/topcatchimage/top-catiimg02.jpg', 
  '/assets/img/topcatchimage/top-catiimg03.jpg', 
  '/assets/img/topcatchimage/top-catiimg04.jpg' 
];

// 预加载所有图片到内存
var preloadedImages = [];
urls.forEach(url => {
  const img = new Image();
  img.src = url;
  preloadedImages.push(img);
});

var i = 0;
setInterval(changeBackground, 3000);

function changeBackground () {
  // 用urls.length代替硬编码的4，后续修改图片数量无需手动调整判断逻辑
  if (i >= urls.length) { 
    i = 0;
  }
  document.getElementById('mainvisual').style.background = `url(${urls[i]})`;
  i++;
}

原理说明 #

• 创建Image对象并设置src后，浏览器会立即发起请求加载图片，加载完成后资源会存入内存缓存
• 后续再通过同一个URL设置背景图时，浏览器会直接读取内存中的缓存资源，不会再发起新的HTTP请求
• 替换硬编码的判断值为urls.length，能让代码更灵活，以后增减图片数量时不用修改逻辑部分

你之前遇到的每张图片请求2次的情况，大概率是浏览器缓存机制在初次加载后才生效，而预加载能从根源上避免这类重复请求，让轮播切换的体验更流畅。

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