使用 p5.js 预加载 JSON 数据并加载图片-js教程-PHP中文网

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

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

在 p5.js 中，preload() 函数用于在 setup() 函数之前预加载资源，例如图片、字体和 JSON 数据。当需要先加载 JSON 数据，然后根据 JSON 数据中的信息加载其他资源（例如图片）时，需要特别注意异步加载的问题。本文将介绍如何正确地使用 loadJSON() 和 loadImage() 函数，确保所有资源都已加载完毕后再执行后续代码。

异步加载的问题

loadJSON() 和 loadImage() 函数都是异步的，这意味着它们不会阻塞程序的执行。当调用这些函数时，它们会立即返回，并在后台加载资源。这可能会导致在资源加载完成之前，程序就开始执行后续的代码，从而引发错误。

例如，如果尝试在 setup() 函数中使用尚未加载完成的图片，可能会遇到 null 或 undefined 的错误。

使用回调函数解决异步加载问题

为了解决异步加载的问题，可以使用回调函数。回调函数是在异步操作完成后执行的函数。loadJSON() 和 loadImage() 函数都接受一个可选的回调函数作为第二个参数。

以下是如何使用回调函数来加载 JSON 数据和图片的示例：

Recraft AI

Recraft AI是一款AI 3D生成工具，免费无限AI画板，生成高质量矢量艺术画、图标、3D图片和插画。

下载

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 <p><strong>代码解释:</strong></p><ol>
<li>
<strong>imgData</strong>: 用于存储从 JSON 文件加载的数据。</li>
<li>
<strong>images</strong>: 用于存储加载的图片。</li>
<li>
<strong>numImagesLoaded</strong>: 计数器，记录已加载的图片数量。</li>
<li>
<strong>totalImages</strong>: 从JSON文件中读取，表示需要加载的图片总数。</li>
<li>
<strong>preload()</strong>:<ul>
<li>使用 loadJSON() 函数加载 "images.json" 文件。</li>
<li>loadJSON() 的第二个参数是一个回调函数，该函数在 JSON 数据加载完成后执行。</li>
<li>在回调函数中，遍历 imgData.images 数组，并使用 loadImage() 函数加载每个图片。</li>
<li>loadImage() 函数也接受一个回调函数，该函数在图片加载完成后执行。</li>
<li>在 loadImage() 的回调函数中，将加载的图片添加到 images 数组，并将 numImagesLoaded 计数器加 1。</li>
<li>当 numImagesLoaded 等于 totalImages 时，表示所有图片都已加载完成，调用 startSketch() 函数开始绘图。</li>
</ul>
</li>
<li>
<strong>setup()</strong>: 现在是空的，因为所有初始化工作都在 startSketch() 函数中完成。</li>
<li>
<strong>startSketch()</strong>:<ul>
<li>创建画布并设置背景颜色。</li>
<li>遍历 images 数组，并将加载的图片绘制到画布上。</li>
</ul>
</li>
</ol><p><strong>images.json 示例:</strong></p><pre class="brush:php;toolbar:false;">{
  "images": ["1.jpg", "2.jpg", "3.jpg"]
}

确保 1.jpg, 2.jpg, 和 3.jpg 文件存在于你的 sketch 的相应目录下。