如何跳过数组中加载失败的图片，按顺序加载下一张可用图片

核心思路 #

• 不要直接给DOM设置背景图，先创建临时Image对象预加载目标图片，通过onload/onerror事件判断资源是否有效
• 图片加载失败时自动递增索引，检测下一张图片，直到找到有效资源或遍历完所有图片（避免死循环）
• 修复原代码的笔误和逻辑漏洞：原代码定义了hasLocalStorage但未调用，还错误引用了不存在的coupons变量

完整修改后代码 #

$(function background() {
  var images = [
    "image1.png",
    "image2.png",
    "image3.png",
    "image4.png",
    "image5.png",
    "image_bookend.png"
  ];
  // CDN基础地址抽离，方便后续修改
  const CDN_BASE = "https://res.cloudinary.com/image/upload/v1636154685/images/";
  // 兜底背景图地址，所有图片都失效时展示，可替换为你确认有效的图片地址
  const FALLBACK_IMG = "image1.png";
  // 记录检测次数，避免全量图片都失效时死循环
  let checkTimes = 0;

  // 检测localStorage可用性
  function hasLocalStorage() {
    try {
      localStorage.setItem("count2", 0);
      if (localStorage.getItem("count2") === "0") {
        return true;
      }
    } catch (e) {
      return false;
    }
    return false;
  }

  // 加载图片的递归函数
  function loadValidImage(count) {
    // 所有图片都检测过都失效，用兜底图
    if (checkTimes >= images.length) {
      $("#image").css("background-image", `url(${CDN_BASE}${FALLBACK_IMG})`);
      // 索引重置为0，下次打开从第一张重新检测
      if (hasLocalStorage()) localStorage.setItem("count2", 0);
      return;
    }
    const currentImgUrl = `${CDN_BASE}${images[count]}`;
    // 创建临时Image对象预加载检测
    const tempImg = new Image();
    tempImg.src = currentImgUrl;
    // 加载成功
    tempImg.onload = function() {
      $("#image").css("background-image", `url(${currentImgUrl})`);
      // 索引+1存入localStorage，取模自动处理越界回到0的逻辑
      const nextCount = (count + 1) % images.length;
      if (hasLocalStorage()) localStorage.setItem("count2", nextCount);
    };
    // 加载失败，检测下一张
    tempImg.onerror = function() {
      checkTimes++;
      const nextCount = (count + 1) % images.length;
      loadValidImage(nextCount);
    };
  }

  // 初始化逻辑
  let initCount = 0;
  if (hasLocalStorage()) {
    initCount = Number(localStorage.getItem("count2")) || 0;
  }
  loadValidImage(initCount);
});

改动说明 #

• 新增了图片预加载检测逻辑，无效资源会自动跳过，不会展示空白背景
• 补全了localStorage可用性判断，兼容不支持localStorage的环境
• 修复了原代码中错误引用coupons变量的笔误，替换为正确的images数组
• 新增了兜底逻辑，所有CDN资源都失效时展示兜底图片，避免页面异常
• 用取模运算%处理索引越界问题，代替原来的if判断，逻辑更简洁

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