Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detecting an image 404 in Javascript

After a user uploads a file we have to do some additional processing with the images such as resizing and upload to S3. This can take up to 10 extra seconds. Obviously we do this in a background. However, we want to show the user the result page immediately and simply show spinners in place until the images arrive in their permanent home on s3.

I'm looking for a way to detect that a certain image failed to load correctly (404) in a cross browser way. If that happens, we want to use JS to show a spinner in it's place and reload the image every few seconds until it can be successfully loaded from s3.

like image 731
Tobias Lütke Avatar asked Jun 10 '10 22:06

Tobias Lütke


People also ask

How do I open an image in JavaScript?

Popular Answers (1) If you really need to open a new window which will contain this image, you can use just JavaScript like this: window. open("http://www.your-site.com/images/picture.jpg", "Window Title", "width=500, height=450"); That will create a "popup" window with the picture.


1 Answers

Handle the <img> element's onerror event.

like image 96
SLaks Avatar answered Oct 01 '22 19:10

SLaks