loadImage function delay

[smv307]

p5.js version

v1.10.0

What is your operating system?

Mac OS

Web browser and version

128.0.6613.137

Actual Behavior

The loadImage function is unable to fetch medium and large images immediately after uploading them to the project's files, with delays of several hours. Smaller images load successfully right away.

Expected Behavior

Ideally, the loadImage function would work for any image immediately after it is uploaded to the web editor, regardless of size.

Steps to reproduce

Snippet:

let photo;

function preload(){
  photo = loadImage("photo.jpg");
}

function setup() {
  createCanvas(400, 400);
  image(photo,0,0);
}

function draw() {
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[raclim]

Thank you so much for reporting this @smv307!

This might be loosely related to a few other issues related to the loadImage() function as well (i.e #3069). I've been having some difficulty pinpointing how to resolve this—I didn't realize that it could also be due to the file sizes! Would you be able to provide URLs to some of your sketches with this issue?

[smv307]

Hi! Here is the sketch I used to demonstrate the issue:

https://editor.p5js.org/smv307/sketches/_MydTJWtN

The larger image I attempted to use still won't load after a few days, but the smaller WEBP version works. I've noticed that WEBP images, in general, aren't affected by this issue.

In all my previous experiences with this bug, it typically resolves itself within a few hours, so I don't have any other examples 🥲.

[jesse-harding]

I have observed this same behavior in my and my students' sketches in the editor in both chrome and safari. Sometimes the error stops if you move the image files into a folder, sometimes opening the sketch in an incognito window works, but largely the issue is difficult to reproduce reliably.

@raclim can you specify what size of images might cause problems? I observed this in a sketch trying to load a 221k jpg image.

[raclim]

Thanks for sharing @jesse-harding! Now that I'm thinking about it, I'm wondering if it might actually be a caching issue if the sketch sometimes works by opening it in incognito or changing the file location?

I just noticed while trying to investigate this that this type of error is resolved after checking the "Disable Cache" field when opening the Developer Tools in Chrome.

I'm going to try to update the CORS policy to see if that might help with this. Please let me know if these issues are still persisting for you or if there are other details that you feel would be helpful to share!

[joemckay5]

It worked! I disabled the cache in developer mode and it loaded the image.

[raclim]

@joemckay5 That's great to hear! I think that the way these requests are being cached might be the cause then!

In that case, I think going into the developer tools could be a temporary solution. I just tried updating the CORS policy, which hopefully can be the longterm solution. Please let me know if you run into this again to see if a different fix might be needed!

[raclim]

I pushed out a fix (#3245) after a suggestion from this issue, which is hopefully much more convenient than clearing the cache! I wanted to check-in if this seems to be working for you all @jesse-harding @joemckay5 @smv307?

[raclim]

Closing this one and directing updates on this to the linked issue above to organize issues!