a port of the Processing Visualization Language
Name

/* @pjs preload */ directive

Examples
/* @pjs preload="myimage.jpg"; */
        
void setup()
{
  size(200,200);
  noLoop();
}

void draw()
{
  background(255);
  PImage im = loadImage("myimage.jpg");
  image(im, 50,50, 100,100);
}
Description

This directive regulates image preloading, which is required when using loadImage() or requestImage() in a sketch. Using this directive will preload all images indicated between quotes, and comma separated if multiple images are used, so that they will be ready for use when the sketch begins running. As resources are loaded via the AJAX approach, not using this directive will result in the sketch loading an image, and then immediately trying to use this image in some way, even though the browser has not finished downloading and caching it. Images can be preloaded from URL, such as "image1.jpg". While all browser-supported image formats are supported by processing.js, it is best to stick to "gif", "jpg" and "png" formats if you intend your sketch to be cross-platform compatible with native Processing.

NOTE: remote images can be drawn, but their pixels cannot be manipulated due to browser security restrictions.

NOTE: this directive is for images only. For preloading fonts, use the font directive listed below.

Syntax
         /* @pjs preload="imageURL"; */  
/* @pjs preload="data:image/imagetype,base64, {base 64 encoded data block}"; */
Syntax for multiple images
         /* @pjs preload="image1,image2,..."; */ 
    
Parameters
preload comma separated list of URLs or data-URIs (may be mixed), all inside a single set of double quotes
Usage Web & Application, Processing.js compatibility
Related @pjs directives
loadImage()
requestImage()

This reference is licensed under the CC BY-NC-SA 2.0 license:

Creative Commons License
Fork me on GitHub