JavaScript：如何实现图片加载的多个onerror fallback机制

要解决多 fallback 图的加载问题，核心思路是把所有要尝试的图片按优先级排成队列，每次加载失败就自动取下一张尝试，直到所有备选用完或加载成功。

基础实现方案 #

直接用数组存所有图片URL，配合索引迭代加载：

const art = document.getElementById('art');
// 按优先级排序：主图在前，备用图依次往后
const fallbackImages = ['cover.jpg', 'album.jpg', 'front.jpg', 'default.png'];
let currentIndex = 0;

function loadNextImage() {
  // 所有备选都尝试完了，做最终兜底处理
  if (currentIndex >= fallbackImages.length) {
    console.log('所有图片加载失败');
    // 也可以给img设置默认错误提示文本
    art.alt = '图片加载失败';
    return;
  }

  // 绑定错误处理：失败就尝试下一张
  art.onerror = () => {
    currentIndex++;
    loadNextImage();
  };

  // 加载当前优先级的图片
  art.src = fallbackImages[currentIndex];
}

// 启动首次加载
loadNextImage();

更可靠的优化版 #

用addEventListener的once选项，确保每个错误事件只触发一次，避免监听堆积：

const art = document.getElementById('art');
const fallbackImages = ['cover.jpg', 'album.jpg', 'front.jpg', 'default.png'];
let currentIndex = 0;

function loadNextImage() {
  if (currentIndex >= fallbackImages.length) {
    console.log('所有图片加载失败');
    art.alt = '图片加载失败';
    return;
  }

  // 移除之前的错误监听（可选，用once的话更严谨）
  art.removeEventListener('error', handleImageError);
  // 添加一次性监听，触发后自动移除
  art.addEventListener('error', handleImageError, { once: true });
  
  art.src = fallbackImages[currentIndex];
}

function handleImageError() {
  currentIndex++;
  loadNextImage();
}

loadNextImage();

为什么原来的代码无法支持多 fallback？ #

原来的代码里，当album.jpg加载失败时，会再次触发同一个onerror函数，导致无限重复设置album.jpg，陷入死循环。而用队列迭代的方式，每次失败都会切换到下一个不同的URL，就能依次尝试所有备用图。

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