使用 p5.js 预加载 JSON 数据中的图片

本文旨在解决 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);   } }

代码解释

1. preload() 函数:
   • 使用 loadJSON(“images.json”, data => { … }) 加载 JSON 数据。data 参数是加载完成的 JSON 对象。
   • 在回调函数中，遍历 imgData.images 数组，使用 loadImage() 函数加载每个图片。
   • loadImage() 函数同样是异步的，所以我们使用它的回调函数来跟踪图片的加载进度。
   • 每次图片加载完成，numImagesLoaded 计数器加 1。
   • 当 numImagesLoaded 等于 imgData.images.length 时，表示所有图片都已加载完成。
2. setup() 函数:
   • 创建画布。
   • 设置 imageMode(CENTER)，使图片以中心点为基准绘制。
3. draw() 函数:
   • 清空画布。
   • 检查 numImagesLoaded 是否等于 imgData.images.length。如果是，则绘制所有图片；否则，显示 “Loading…” 文本。

注意事项

• 确保 images.json 文件存在，并且文件路径正确。
• loadImage() 函数也是异步的，所以需要使用回调函数来跟踪图片的加载进度。
• 在 draw() 函数中，需要检查所有图片是否加载完成，然后再进行绘制操作，避免出现错误。
• 如果图片数量很多，可以使用更高效的加载方式，例如使用 Promise 或 async/await。

总结

通过使用 loadJSON() 的回调函数，我们可以确保在 JSON 数据加载完成后再加载图片，从而避免出现资源未加载完全的问题。这种方法简单易懂，适用于大多数情况。同时，需要注意 loadImage() 函数也是异步的，需要使用回调函数来跟踪图片的加载进度。