P5.js预加载JSON图片数据方法

在 p5.js 中，如何高效预加载 JSON 数据和图片资源？本文针对 p5.js 开发中常见的资源预加载问题，特别是 JSON 数据驱动的图片加载，提供了详细的解决方案。由于 `loadJSON()` 和 `loadImage()` 的异步特性，直接加载可能导致图片未完全加载就开始执行后续代码。本文重点讲解如何利用 `loadJSON()` 的回调函数，确保 JSON 数据加载完成后，再逐一加载图片资源，并通过计数器跟踪加载进度。通过示例代码，清晰展示了如何避免资源未加载完全的问题，并在所有图片加载完毕后，才开始执行 `setup()` 函数和后续的绘制操作。掌握此方法，能有效提升 p5.js 应用的用户体验，避免出现资源加载导致的显示错误。

本文旨在解决 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() 函数也是异步的，需要使用回调函数来跟踪图片的加载进度。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《P5.js预加载JSON图片数据方法》文章吧，也可关注golang学习网公众号了解相关技术文章。