p5.js preload()函数

p5.js 中的preload()函数用于在 setup()函数之前异步加载文件。它在加载草图时只运行一次。

大多数用户不使用 preload()函数，因为可以在 setup()函数中完成相同的任务。但是，在我们的程序中分离相似的代码以提高其可伸缩性和模块化是很好的。通常 preload()函数用于在草图中加载图像、3D 模型、字体等。在加载资源期间显示“正在加载...”文本。

句法：

preload() {
   // All loading calls here
}

参数：此函数不接受任何参数。

下面的示例说明了 p5.js 中的preload()函数：

示例 1：

Javascript

let gfg_img;
function preload() {
  
  // Loading the image
  gfg_img = loadImage('/gfg.png');
}
  
function setup() {
  createCanvas(400, 400);
}
  
function draw() {
  
  // Set background color to green
  background('green');
  
  // Show loaded image on screen at (100, 100)
  image(gfg_img, 100, 100);
}

输出：

示例 2：

Javascript

let cylinder;
function preload() {
  
  // Loading a cylinder model
  cylinder = loadModel('/cylinder.stl', true);
}
  
function setup() {
  createCanvas(400, 400, WEBGL);
  noLoop();
}
  
function draw() {
  
  // Set background color to green
  background('green');
  
  // Display and rotate the model
  rotateX(90);
  model(cylinder);
}

输出：