如何在p5.js/JavaScript中预加载图片到内存避免连续播放卡顿

• 错误使用p5.js的preload生命周期：preload原生支持阻塞等待所有资源加载完成后再执行后续逻辑，你的代码在preload内使用定时器分批异步加载图片，完全没用到预加载能力，1000张图片是零散加载的，展示时未加载完成就会出现卡顿间隙。
• 加载逻辑和展示逻辑耦合：定时器同时控制图片索引递增和图片加载，相当于展示到对应索引的图片时才触发加载，自然会出现加载等待的卡顿。

直接利用preload预加载全部1000张图片到内存，所有资源加载完成后再启动轮播，完全消除加载间隙，代码改动量极小：

let faces = [];
let currentIndex = 0;
// 轮播间隔，单位毫秒，按需调整数值即可控制播放速度
const PLAY_INTERVAL = 40;

function preload(){
  // 预加载全部1000张图片到内存
  for(let i = 0; i < 1000; i++){
    faces[i] = loadImage(`aberdeen_results/${i}.jpg`);
  }
}

function setup(){
  createCanvas(innerWidth, innerHeight);
  // 所有图片加载完成后才会执行到这里，启动切换定时器
  setInterval(() => {
    currentIndex = (currentIndex + 1) % 1000;
  }, PLAY_INTERVAL);
}

function draw(){
  background(255);
  // 直接读取内存中已加载好的图片绘制，无卡顿
  image(faces[currentIndex], 450, 150);
}

如果1000张图片总体积过大，全量预加载等待时间太长，可以采用分块预加载方案：先加载前10-20张图片立即启动轮播，轮播过程中后台异步加载剩余图片，兼顾启动速度和播放流畅度。

内容的提问来源于stack exchange，提问作者aidan.goetzinger