使用 p5.js 预加载 JSON 数据并加载图片
在 p5.js 中，preload() 函数用于在 setup() 函数之前预加载资源，例如图片、字体和 JSON 数据。当需要先加载 JSON 数据，然后根据 JSON 数据中的信息加载其他资源（例如图片）时，需要特别注意异步加载的问题。本文将介绍如何正确地使用 loadJSON() 和 loadImage() 函数，确保所有资源都已加载完毕后再执行后续代码。
异步加载的问题
loadJSON() 和 loadImage() 函数都是异步的，这意味着它们不会阻塞程序的执行。当调用这些函数时，它们会立即返回，并在后台加载资源。这可能会导致在资源加载完成之前，程序就开始执行后续的代码，从而引发错误。
例如，如果尝试在 setup() 函数中使用尚未加载完成的图片，可能会遇到 null 或 undefined 的错误。
使用回调函数解决异步加载问题
为了解决异步加载的问题，可以使用回调函数。回调函数是在异步操作完成后执行的函数。loadJSON() 和 loadImage() 函数都接受一个可选的回调函数作为第二个参数。
以下是如何使用回调函数来加载 JSON 数据和图片的示例：
奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自动生成缩略图，可以自由设置宽高5、图片批量加水印，可以自由设置字体，大小，样式，水印位置（同时支持文字或图片类型水印）6、强大的标签式数据调用，可以调用（新闻，产品，下载，招聘）支持
let imgData;
let images = [];
let numImagesLoaded = 0;
let totalImages;
function preload() {
imgData = loadJSON("images.json", data => {
imgData = data; // Assign the loaded data
totalImages = imgData.images.length;
for (let filename of imgData.images) {
loadImage(filename, img => {
images.push(img);
numImagesLoaded++;
if (numImagesLoaded === totalImages) {
// All images are loaded, call a function to start the sketch
startSketch();
}
});
}
});
}
function setup() {
// setup() is now empty, startSketch() will be called when all images are loaded
}
function startSketch() {
createCanvas(400, 400);
background(220);
// Now you can safely use the images array
for (let i = 0; i < images.length; i++) {
image(images[i], i * 50, 0, 50, 50); // Display the images
}
}代码解释:
- imgData: 用于存储从 JSON 文件加载的数据。
- images: 用于存储加载的图片。
- numImagesLoaded: 计数器，记录已加载的图片数量。
- totalImages: 从JSON文件中读取，表示需要加载的图片总数。
-
preload():
- 使用 loadJSON() 函数加载 "images.json" 文件。
- loadJSON() 的第二个参数是一个回调函数，该函数在 JSON 数据加载完成后执行。
- 在回调函数中，遍历 imgData.images 数组，并使用 loadImage() 函数加载每个图片。
- loadImage() 函数也接受一个回调函数，该函数在图片加载完成后执行。
- 在 loadImage() 的回调函数中，将加载的图片添加到 images 数组，并将 numImagesLoaded 计数器加 1。
- 当 numImagesLoaded 等于 totalImages 时，表示所有图片都已加载完成，调用 startSketch() 函数开始绘图。
- setup(): 现在是空的，因为所有初始化工作都在 startSketch() 函数中完成。
-
startSketch():
- 创建画布并设置背景颜色。
- 遍历 images 数组，并将加载的图片绘制到画布上。
images.json 示例:
{
"images": ["1.jpg", "2.jpg", "3.jpg"]
}确保 1.jpg, 2.jpg, 和 3.jpg 文件存在于你的 sketch 的相应目录下。
注意事项
- 确保 JSON 文件和图片文件都位于正确的目录中，以便 p5.js 能够找到它们。
- preload() 函数必须在 setup() 函数之前定义。
- 在 preload() 函数中加载所有必要的资源，以确保在 setup() 函数执行时，所有资源都已加载完毕。
- 正确处理异步加载，使用回调函数或 Promise 来确保资源加载顺序。
总结
通过使用 loadJSON() 和 loadImage() 函数的回调函数，可以确保在 JSON 数据和图片加载完成之后再执行后续代码，避免因异步加载导致的问题。这种方法可以有效地管理资源的加载顺序，并提高程序的稳定性和可靠性。记住，理解并正确处理异步加载是编写高质量 p5.js 代码的关键。
