loadImage function delay #3232
Description
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() {
}
Activity
welcome commentedon Sep 13, 2024
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.
[-]loadImage function [/-][+]loadImage function delay[/+]raclim commentedon Sep 13, 2024
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?s1oane commentedon Sep 16, 2024
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 commentedon Oct 1, 2024
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 commentedon Oct 1, 2024
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 commentedon Oct 1, 2024
It worked! I disabled the cache in developer mode and it loaded the image.
raclim commentedon Oct 2, 2024
@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 commentedon Oct 9, 2024
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 commentedon Mar 4, 2025
Closing this one and directing updates on this to the linked issue above to organize issues!