使用 p5.js 预加载 JSON 中的图像数据
本文将介绍一种在 p5.js 中预加载 JSON 数据并根据 JSON 数据加载图像的方法，确保在 setup() 函数开始执行时，所有图像资源都已加载完成。 这在处理依赖于外部数据（例如配置文件或图像列表）的项目中非常有用。
问题：
通常，loadJSON() 和 loadImage() 函数都是异步的。这意味着它们不会阻塞代码的执行，而是在后台加载数据或图像。 如果 setup() 函数在数据或图像加载完成之前开始执行，可能会导致程序出错或产生意外的行为。
解决方案：
p5.js 提供了 loadJSON() 函数的回调机制，允许我们在 JSON 数据加载完成后执行特定的代码块。 我们可以利用这个特性，在 loadJSON() 的回调函数中加载图像，并使用计数器来跟踪图像的加载进度。
代码示例：
以下代码展示了如何使用 loadJSON() 的回调函数来加载图像：
let imgData;
let numImagesLoaded = 0;
let images = []; // 用于存储加载的图像
function preload() {
imgData = loadJSON("images.json", data => {
imgData = data; // 将加载的 JSON 数据赋值给 imgData
for (let filename of imgData.images) {
loadImage(filename, img => {
images.push(img); // 将加载的图像添加到数组中
numImagesLoaded += 1;
});
}
});
}
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, (height / (images.length + 1)) * (i + 1), 50, 50);
}
} else {
// 显示加载信息
text("Loading...", width / 2, height / 2);
textAlign(CENTER, CENTER);
}
}代码解释：
-
preload() 函数：
- 使用 loadJSON() 函数加载 images.json 文件。
- loadJSON() 的第二个参数是一个回调函数，该函数将在 JSON 数据加载完成后执行。
- 在回调函数中，遍历 imgData.images 数组，并使用 loadImage() 函数加载每个图像。
- loadImage() 函数也有一个回调函数，该函数将在图像加载完成后执行。
- 在 loadImage() 的回调函数中，将加载的图像添加到 images 数组，并将 numImagesLoaded 计数器加 1。
-
setup() 函数：
- 创建画布，并设置图像的对齐模式。
-
draw() 函数：
- 首先检查 numImagesLoaded 是否等于 imgData.images.length。 如果是，则表示所有图像都已加载完成。
- 如果所有图像都已加载完成，则遍历 images 数组，并在画布上绘制每个图像。
- 如果图像尚未全部加载完成，则显示加载信息。
images.json 文件示例：
{
"images": ["1.jpg", "2.jpg", "3.jpg"]
}注意事项：
- 确保 images.json 文件和图像文件位于正确的位置。
- 可以根据需要修改代码来处理不同的图像大小和位置。
- 使用 preload() 函数可以确保在 setup() 函数开始执行之前，所有必要的资源都已加载完成。
总结：
通过利用 loadJSON() 函数的回调机制，我们可以轻松地在 p5.js 中预加载 JSON 数据，并根据 JSON 数据加载图像。 这种方法可以确保在 setup() 函数开始执行时，所有图像资源都已加载完成，从而避免程序出错或产生意外的行为。
