Javascript 在p5.js中使用loadImage的正确方法？

我正在从json文件加载图像URL。除了显示实际图像外，我的一切都很好

这是一个简单的陈词滥调旋转木马。点击，它会将索引移动到下一个索引上。我想确保图像同时显示，但显然它不起作用（图像被引用，但不显示）

有人知道我做错了什么吗

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w/2;
var yPos = h/2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("image_search_result.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    imgList.push(imageData.items[i]['link']);
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax){
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w,h);
}

function draw() {
  background(0);
  image(loadImage(imgList[index]),xPos,yPos,w,h);
  text(index,20,60); // index counter
  text(imgList[index],80,60); // image list number
  textSize(20);
  fill(255);
}

var w=window.innerWidth；
var h=窗内高度；
var xPos=w/2；
var-yPos=h/2；
var指数=0；
var图像数据；
var-imgList=[]；
var指数max；
函数预加载（）{
loadJSON（“image\u search\u result.json”，resultload）；
}
函数结果加载（数据）{
图像数据=数据；
indexMax=imageData.items.length；
对于（i=0；i

我认为问题在于每次调用绘图函数时都试图上传图像。在编写代码时，即使要上传的图像始终相同，p5.js也会从头开始重新加载它们。您应该在启动程序之前加载它们。正如我在下面所做的：

var w = window.innerWidth;
var h = window.innerHeight;
var xPos = w / 2;
var yPos = h / 2;
var index = 0;
var imageData;
var imgList = [];
var indexMax;

function preload() {
  loadJSON("img.json", resultLoaded);
}

function resultLoaded(data) {
  imageData = data;
  indexMax = imageData.items.length;
  for (i = 0; i < indexMax; i++) {
    url = imageData.items[i]["link"];
    imgList.push(loadImage(url));
  }
}

function mouseReleased() {
  index = index + 1;
  if (index == indexMax) {
    index = index - indexMax;
  }
}

function setup() {
  createCanvas(w, h);
}

function draw() {
  background(0);

  image(imgList[index], xPos, yPos, w, h);

  text(index, 20, 60);
  textSize(20);
  fill(255);
}

var w=window.innerWidth；
var h=窗内高度；
var xPos=w/2；
var-yPos=h/2；
var指数=0；
var图像数据；
var-imgList=[]；
var指数max；
函数预加载（）{
loadJSON（“img.json”，resultload）；
}
函数结果加载（数据）{
图像数据=数据；
indexMax=imageData.items.length；
对于（i=0；i

---

在我写代码的时候，乔治·普洛芬扎给出了同样的答案。抱歉

最后，我通过在loadImage中添加一个回调来实现这一点。我不知道您可以这样做（在任何文档中都没有看到它的引用），但它的工作效率非常高

function draw() {
  nextImg = loadImage(imgList[index], imageLoaded);
  text(index,20,60); // index counter
  text(imgList[index],80,60); // image list number
  textSize(20);
  fill(255);
}

function imageLoaded() {
  background(0);
  image(nextImg,xPos,yPos,w,h);
  imageMode(CENTER);
}

---

对json文件使用预加载做得很好。我建议：1。使用另一个数组存储加载的图像2。在

resultsloadded

中将图像加载到新数组中，而不是在

draw（）中每秒多次加载图像。在
draw
中调用
image
时，请从新数组中引用已加载的图像，谢谢您的评论。事实上，我也尝试过，但没有成功。在preload（）期间，我无法使loadImage有效工作。虽然选择了此答案，但这仍然不是您希望编写此代码的方式。在draw中调用loadImage（）是一种不必要的计算浪费。请参考尼科洛的回答