当前位置：首页 > 文章列表 > 文章 > 前端 > P5.js预加载JSON图片数据方法

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

2025-08-11 23:18:32 0浏览收藏

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

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

代码解释

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..." 文本。