Downloading images from server in the background, while script is running

p5.js Beginners
1

I want to create a website with many, many images on the frontpage. However, not all of these images are visiable from the start of the script on, instead they should be downloaded from the server in the background, while the script is running. How can I do that in p5?

Thanks for any replies!

2

Definitely. You just need to use the callback function argument(s) of the loadImage function.

let loading = false;
let img;

function setup() {
  createCanvas(300, 300);
  textAlign(LEFT, TOP);
}

function draw() {
  if (img) {
    image(img, 0, 0);
  } else if (loading) {
    background('red');
    text("Loading ...", 10, 10);
  } else {
    background(150);
    text("Click to Load", 10, 10);
  }
}

function mousePressed() {
  if (!loading) {
    loading = true;
    loadImage(
      'https://www.paulwheeler.us/files/windows-95-desktop-background.jpg',
      (i) => {
        img = i;
        loading = false;
      },
      () => {
        console.log('failed to load image');
      }
    );
  }
}