本文旨在解决 p5.js 中预加载 JSON 数据，并根据 JSON 数据中的文件名列表加载图片资源的问题。由于 loadJSON() 和 loadImage() 都是异步函数，直接使用会导致图片未加载完成就开始执行后续代码。本文将介绍如何利用 loadJSON() 的回调函数确保在所有图片加载完成后再开始执行 setup() 函数，避免出现资源未加载完全的问题。
利用 loadJSON 的回调函数
loadJSON() 函数允许传入一个回调函数作为第二个参数。这个回调函数会在 JSON 数据加载完成后被调用。我们可以利用这个特性，在回调函数中加载图片，从而保证 JSON 数据加载完成后再加载图片。
示例代码
假设你有一个名为 images.json 的文件，内容如下：
{ "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() 函数也是异步的，需要使用回调函数来跟踪图片的加载进度。
以上就是使用 p5.js 预加载 JSON 数据中的图片的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1514221.html
微信扫一扫 
支付宝扫一扫 
