Use async/await keywords together with Promise.all() to load multiple images together. This can speed up sketch loading, because the images will be loaded at the same time, instead of one after the other. The images are drawn together on the canvas only after they all finish loading.
Using multiple calls to loadImage() inside a Promise.all() works with other functions that load resources. For example, loadFont() in this video tutorial on Typography and Asset Loading by Qianqian Ye.
Load Multiple Images with Promise.all: Edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.
Related Examples
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."
Local Storage
Save data from the browser on the device.
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."
JSON
Store data in JavaScript object notation.
Black outlines of circles on a white background. Text below the circles reads "Click and drag to add bubbles."
Table
Store data as comma-separated values.
Three random images loaded and displayed on a canvas after using async/await and Promise.all.
Load Multiple Images with Promise.all
Load multiple files at the same time before drawing on canvas.