本文旨在解决 p5.js 中预加载 JSON 数据，并根据 JSON 数据中的文件名列表加载图片资源的问题。由于 loadJSON() 和 loadImage() 都是异步函数，直接使用会导致图片未加载完成就开始执行后续代码。本文将介绍如何利用 loadJSON() 的回调函数确保在所有图片加载完成后再开始执行 setup() 函数，避免出现资源未加载完全的问题。
利用 loadJSON 的回调函数
loadJSON() 函数允许传入一个回调函数作为第二个参数。这个回调函数会在 JSON 数据加载完成后被调用。我们可以利用这个特性，在回调函数中加载图片，从而保证 JSON 数据加载完成后再加载图片。
示例代码
假设你有一个名为 images.json 的文件，内容如下：
企业后台管理系统JaManage2.0 多语言版
下载
功能介绍： 一.系统管理：管理员管理，可以新增管理员及修改管理员密码；数据库备份，为保证您的数据安全本系统采用了数据库备份功能；上传文件管理，管理你增加产品时上传的图片及其他文件 二.企业信息：可设置修改企业的各类信息及介绍 三.产品管理：产品类别新增修改管理，产品添加修改以及产品的审核 四.下载中心：可分类增加各种文件，如驱动和技术文档等文件的下载 五.订单管理：查看订单的详细信息
{
"images": ["1.jpg", "2.jpg", "3.jpg"]
}以下代码展示了如何使用 loadJSON() 的回调函数来加载图片：
let imgData;
let images = [];
let numImagesLoaded = 0;
function preload() {
imgData = loadJSON("images.json", data => {
imgData = data; // 确保 imgData 在回调函数外部可用
for (let filename of imgData.images) {
loadImage(filename, img => {
images.push(img); // 将加载的图片添加到数组中
numImagesLoaded++;
if (numImagesLoaded === imgData.images.length) {
console.log("所有图片加载完成！");
}
});
}
});
}
function setup() {
createCanvas(400, 400);
imageMode(CENTER);
}
function draw() {
background(220);
// 确保所有图片加载完成后再绘制
if (numImagesLoaded === imgData.images.length) {
for(let i = 0; i < images.length; i++){
image(images[i], width / 2 + i * 50, height / 2, 50, 50);
}
} else {
text("Loading...", width / 2, height / 2);
textAlign(CENTER, CENTER);
}
}代码解释
-
preload() 函数:
- 使用 loadJSON("images.json", data => { ... }) 加载 JSON 数据。data 参数是加载完成的 JSON 对象。
- 在回调函数中，遍历 imgData.images 数组，使用 loadImage() 函数加载每个图片。
- loadImage() 函数同样是异步的，所以我们使用它的回调函数来跟踪图片的加载进度。
- 每次图片加载完成，numImagesLoaded 计数器加 1。
- 当 numImagesLoaded 等于 imgData.images.length 时，表示所有图片都已加载完成。
-
setup() 函数:
- 创建画布。
- 设置 imageMode(CENTER)，使图片以中心点为基准绘制。
-
draw() 函数:
- 清空画布。
- 检查 numImagesLoaded 是否等于 imgData.images.length。如果是，则绘制所有图片；否则，显示 "Loading..." 文本。
注意事项
- 确保 images.json 文件存在，并且文件路径正确。
- loadImage() 函数也是异步的，所以需要使用回调函数来跟踪图片的加载进度。
- 在 draw() 函数中，需要检查所有图片是否加载完成，然后再进行绘制操作，避免出现错误。
- 如果图片数量很多，可以使用更高效的加载方式，例如使用 Promise 或 async/await。
总结
通过使用 loadJSON() 的回调函数，我们可以确保在 JSON 数据加载完成后再加载图片，从而避免出现资源未加载完全的问题。这种方法简单易懂，适用于大多数情况。同时，需要注意 loadImage() 函数也是异步的，需要使用回调函数来跟踪图片的加载进度。
