p5js在Preload外加载图片如何确保加载成功？

架构老林

2026-10-4

p5.js preload函数外加载图片的可靠实现方案

解决`loadImage is not defined`偶发报错

报错核心原因是调用loadImage时，p5.js核心库未完成初始化，或调用时机不在p5实例生命周期内
若使用全局模式（无需手动new p5的写法），所有调用loadImage的代码必须在setup执行完成后触发，比如上传按钮的回调绑定逻辑，要写在setup函数内部：

function setup() {
  createCanvas(800, 600);
  // 上传按钮事件绑定放在setup内，确保p5初始化完成后生效
  select('#uploadBtn').changed(handleWallUpload);
}

若使用实例模式，所有loadImage调用必须通过当前p5实例触发，比如p.loadImage()，不要直接调用全局的loadImage

preload外加载图片的校验方案

p5.js的loadImage本身支持回调参数，无需依赖preload的预加载机制，两种写法可确保图片加载完成再使用：

写法1：用回调函数处理加载完成逻辑

let currentWallImg;
function handleWallUpload(event) {
  const file = event.target.files[0];
  if (file.type.startsWith('image/')) {
    // 第二个参数为加载成功回调，第三个为加载失败回调
    loadImage(
      file,
      (img) => {
        currentWallImg = img;
        // 加载完成后触发重绘或执行后续业务逻辑
        redraw();
      },
      (err) => {
        console.error('墙面图片加载失败', err);
        // 可自行补充用户提示逻辑
      }
    );
  }
}

写法2：通过p5.Image属性判断加载状态

如果需要在draw函数中判断图片是否可渲染，直接判断图片实例的width属性是否大于0即可：

function draw() {
  background(255);
  if (currentWallImg && currentWallImg.width > 0) {
    // 仅图片加载完成后才会执行渲染逻辑
    image(currentWallImg, 0, 0, width, height);
  }
}