使用Javascript加载大量图片时请求取消、加载延迟问题如何优化？

问题根因 #

• 请求cancelled报错：当前img节点的上一张图片请求尚未完成时就直接修改src属性，浏览器会主动终止未完成的旧请求，就会出现该状态提示，该问题本身不是致命错误，但会浪费带宽、拉低加载效率。
• 加载延迟问题：图片加载耗时受网络波动影响极大，完全依赖onLoad事件触发下一张加载，根本无法保证稳定的500ms切换间隔。

最优实现方案 #

采用预加载队列+双缓存节点的组合方案，既可以保证切换帧率稳定达标，也不会出现请求取消的问题，核心逻辑如下：

1. 维护一个长度为3~5的预加载缓存队列，提前把接下来要展示的图片加载到内存中
2. 准备两个img节点，一个用于前台展示，一个用于后台预加载下一张图片，到切换时间点直接把预加载完成的图片地址赋值给展示节点，瞬时完成切换
3. 每次切换后立刻往预加载队列补充新的图片，保证队列始终有足够的待展示资源

示例代码 #

// 配置项
const TOTAL_IMAGES = 40000; // 总图片数
const SWITCH_INTERVAL = 500; // 切换间隔
const PRELOAD_COUNT = 3; // 预加载队列长度

// 全局变量
const preloadQueue = [];
const showImg = document.getElementById('show-img'); // 前台展示的img节点
let currentIndex = 0;

// 预加载函数
function preloadImage() {
  // 随机生成下一张图片的编号，也可以替换为你自己的序号递增逻辑
  const randomId = Math.floor(Math.random() * TOTAL_IMAGES) + 1;
  const imgUrl = `seg/out-${randomId}.jpg?v=${Math.random()}`;
  const img = new Image();
  img.src = imgUrl;
  img.onload = () => {
    preloadQueue.push(imgUrl);
  };
}

// 初始化预加载队列
for (let i = 0; i < PRELOAD_COUNT; i++) {
  preloadImage();
}

// 定时切换逻辑
setInterval(() => {
  // 队列有预加载好的图片才切换，避免网络极端差的情况出现空白
  if (preloadQueue.length > 0) {
    const nextImgUrl = preloadQueue.shift();
    showImg.src = nextImgUrl;
    // 补充新的预加载任务
    preloadImage();
  }
}, SWITCH_INTERVAL);

额外优化建议 #

• 如果图片是静态资源，建议给服务器配置静态资源缓存头，重复加载同一张图片时直接走本地缓存，速度更快
• 预加载队列长度可以根据你的实际网络情况调整，网络越差可以把队列设得越长，避免出现队列空的情况

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