如何在p5.js草图加载失败时进行自动重置？

p5.js 原生的 loadImage() 方法内置加载状态回调，可以直接在加载阶段捕获错误，不会阻塞整体流程，以下是3种可直接落地的实现思路：

• 方案1：通过 loadImage 错误回调实时处理加载失败的资源
  不需要把图片加载逻辑写死在无错误捕获的 preload 里，直接给 loadImage 传入成功、失败双回调，加载失败时立刻切换占位图或加载下一张资源，不会触发全局加载卡住：

  let displayImg;
  // 随机/按规则获取下一张图片链接的自定义方法
  function getTargetImgUrl() {
    // 此处写你自己的图片选取逻辑，返回对应url
  }
  
  function preload() {
    loadImage(
      getTargetImgUrl(),
      (img) => displayImg = img, // 加载成功直接赋值
      (err) => {
        // 加载失败分支，两种选择二选一即可
        // 选择1：直接加载本地占位图
        displayImg = loadImage('local-placeholder.png');
        // 选择2：重新触发加载，切换下一张图片
        // loadImage(getTargetImgUrl(), img => displayImg = img)
      }
    )
  }
  
  function setup() {
    createCanvas(windowWidth, windowHeight);
  }
  
  function draw() {
    background(255);
    if(displayImg) image(displayImg, 0, 0, width, height);
  }
  

• 方案2：独立于p5流程的全局超时兜底
  你之前遇到的超时逻辑不执行，是因为把计时器写在了p5的生命周期内部，会被卡住的加载流程阻塞。把计时器逻辑写到p5实例外部，作为浏览器全局逻辑运行，就可以不受p5加载状态影响：

  // 写在所有p5代码之外，页面加载后立刻执行
  const MAX_WAIT_TIME = 5000; // 自定义最长等待加载时间，单位毫秒
  const loadTimer = setTimeout(() => {
    const loadingDom = document.querySelector('.p5_loading');
    // 超时后仍存在加载节点，说明加载卡住
    if(loadingDom) {
      // 简单处理直接刷新页面，重新随机选取图片
      window.location.reload();
      // 也可以自己写逻辑，直接替换加载dom、重新调用图片加载方法
    }
  }, MAX_WAIT_TIME)
  
  function setup() {
    // 加载完成后立刻清除兜底计时器
    clearTimeout(loadTimer);
    createCanvas(windowWidth, windowHeight);
    // 剩余setup逻辑
  }
  

• 方案3：批量预校验全量图片资源（根源解决）
  有空的时候可以跑一次批量校验脚本，一次性把8000张图里的损坏资源全部筛出来，从数据库层面清理后就不会再出现偶发加载失败的问题：

  // 填入你的所有图片链接数组
  const allImageList = [/* 你的图片url列表 */];
  const brokenImageList = [];
  let checkedCount = 0;
  
  allImageList.forEach(imgUrl => {
    const testImg = new Image();
    testImg.onload = () => checkFinish();
    testImg.onerror = () => {
      brokenImageList.push(imgUrl);
      checkFinish();
    }
    testImg.src = imgUrl;
  })
  
  function checkFinish() {
    checkedCount++;
    if(checkedCount === allImageList.length) {
      console.log('所有损坏图片链接：', brokenImageList);
      // 拿到列表后直接从你的资源库中剔除/替换这些链接即可
    }
  }
  

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