p5.js中draw()函数内无法加载图片的替代方案咨询

1. 正确使用preload()完成全量预加载 #

p5.js的preload()是专门处理异步资源加载的钩子函数，所有在该函数内的加载操作会阻塞后续setup()和draw()的执行，直到资源全部加载完毕，从根源避免"未就绪就调用"的问题。

实现示例： #

let imageList = [];
const totalImages = 150;

// 预加载所有图片
function preload() {
  // 假设图片命名有规律，如bg_0.jpg至bg_149.jpg，路径为assets文件夹下
  for (let i = 0; i < totalImages; i++) {
    const imgPath = `assets/bg_${i}.jpg`;
    imageList.push(loadImage(imgPath));
  }
  
  // 若图片命名无规律，可先定义文件名数组再循环加载
  // const imageNames = ["lake.jpg", "forest.jpg", ...];
  // for (const name of imageNames) {
  //   imageList.push(loadImage(`assets/${name}`));
  // }
}

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  // 根据Voronoi逻辑计算当前需要显示的图片索引
  const targetIndex = getImageIndexByCursor(mouseX, mouseY);
  // 直接调用预加载好的图片
  image(imageList[targetIndex], 0, 0, width, height);
}

// 替换为你的Voronoi索引计算逻辑
function getImageIndexByCursor(x, y) {
  // 示例逻辑：根据鼠标x坐标划分区间返回索引
  return floor(map(x, 0, width, 0, totalImages));
}

2. 懒加载（按需加载）优化初始速度 #

如果150张图全量预加载导致初始等待时间过长，可采用懒加载策略：只加载当前需要显示的图片，加载后缓存避免重复请求。

实现示例： #

const loadedImages = {};
const totalImages = 150;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  const targetIndex = getImageIndexByCursor(mouseX, mouseY);
  const imgPath = `assets/bg_${targetIndex}.jpg`;

  // 检查是否已缓存，未缓存则异步加载
  if (!loadedImages[targetIndex]) {
    loadImage(imgPath, (loadedImg) => {
      loadedImages[targetIndex] = loadedImg;
      // 加载完成后绘制
      image(loadedImg, 0, 0, width, height);
    });
  } else {
    // 已缓存直接绘制
    image(loadedImages[targetIndex], 0, 0, width, height);
  }
}

3. 排查预加载失败的常见原因 #

你之前预加载后调用失败，大概率是以下问题导致：

• 路径错误：检查loadImage()的路径是否与文件实际位置匹配（p5.js的根目录为index.html所在文件夹）
• 跨域问题：若图片存放在外部域名，需配置CORS，或迁移图片至本地项目目录
• 索引越界：调用时使用的索引超出数组长度（例如图片共150张，索引应为0-149）
• 加载时机错误：若在setup()而非preload()中循环加载，loadImage()的异步特性会导致draw()执行时图片未就绪

4. 预加载进度提示优化体验 #

全量预加载时可添加进度提示，提升用户体验：

let loadProgress = 0;
const totalImages = 150;

function preload() {
  for (let i = 0; i < totalImages; i++) {
    const imgPath = `assets/bg_${i}.jpg`;
    loadImage(imgPath, () => {
      loadProgress++;
    });
  }
}

function draw() {
  background(200);
  textSize(24);
  textAlign(CENTER, CENTER);
  text(`加载中：${Math.floor(loadProgress / totalImages * 100)}%`, width/2, height/2);
  
  // 加载完成后执行核心逻辑
  if (loadProgress === totalImages) {
    const targetIndex = getImageIndexByCursor(mouseX, mouseY);
    image(imageList[targetIndex], 0, 0, width, height);
  }
}

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