使用 p5.js 预加载 JSON 数据并加载图片
在 p5.js 中，preload() 函数用于在 setup() 函数之前预加载资源，例如图片、字体和 JSON 数据。当需要先加载 JSON 数据，然后根据 JSON 数据中的信息加载其他资源（例如图片）时，需要特别注意异步加载的问题。本文将介绍如何正确地使用 loadJSON() 和 loadImage() 函数，确保所有资源都已加载完毕后再执行后续代码。
异步加载的问题
loadJSON() 和 loadImage() 函数都是异步的，这意味着它们不会阻塞程序的执行。当调用这些函数时，它们会立即返回，并在后台加载资源。这可能会导致在资源加载完成之前，程序就开始执行后续的代码，从而引发错误。
例如，如果尝试在 setup() 函数中使用尚未加载完成的图片，可能会遇到 null 或 undefined 的错误。
使用回调函数解决异步加载问题
为了解决异步加载的问题，可以使用回调函数。回调函数是在异步操作完成后执行的函数。loadJSON() 和 loadImage() 函数都接受一个可选的回调函数作为第二个参数。
以下是如何使用回调函数来加载 JSON 数据和图片的示例：
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 代码的关键。
以上就是使用 p5.js 预加载 JSON 数据并加载图片的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514279.html
微信扫一扫 
支付宝扫一扫 
