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

使用 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   } }

代码解释:

1. imgData: 用于存储从 JSON 文件加载的数据。
2. images: 用于存储加载的图片。
3. numImagesLoaded: 计数器，记录已加载的图片数量。
4. totalImages: 从JSON文件中读取，表示需要加载的图片总数。
5. preload():
   • 使用 loadJSON() 函数加载 “images.json” 文件。
   • loadJSON() 的第二个参数是一个回调函数，该函数在 JSON 数据加载完成后执行。
   • 在回调函数中，遍历 imgData.images 数组，并使用 loadImage() 函数加载每个图片。
   • loadImage() 函数也接受一个回调函数，该函数在图片加载完成后执行。
   • 在 loadImage() 的回调函数中，将加载的图片添加到 images 数组，并将 numImagesLoaded 计数器加 1。
   • 当 numImagesLoaded 等于 totalImages 时，表示所有图片都已加载完成，调用 startSketch() 函数开始绘图。
6. setup(): 现在是空的，因为所有初始化工作都在 startSketch() 函数中完成。
7. 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 代码的关键。