Check if an image is loaded (no errors) with jQuery

M

15

262

I'm using JavaScript with the jQuery library to manipulate image thumbnails contained in a unordered list. When the image is loaded it does one thing, when an error occurs it does something else. I'm using jQuery load() and error() methods as events. After these events I check the image DOM element for the .complete to make sure the image wasn't already loaded before jQuery could register the events.

It works correctly except when an error occurs before jQuery can register the events. The only solution I can think of is to use the img onerror attribute to store a "flag" somewhere globally (or on the node it's self) that says it failed so jQuery can check that "store/node" when checking .complete.

Anyone have a better solution?

Edit: Bolded main points and added extra detail below: I'm checking if an image is complete (aka loaded) AFTER I add a load and error event on the image. That way, if the image was loaded before the events were registered, I will still know. If the image isn't loaded after the events then the events will take care of it when it does. The problem with this is, I can easily check if an image is loaded already, but I can't tell if an error occurred instead.

Mannino answered 30/12, 2009 at 0:58 Comment(3)

When do you register the jQuery events? Maybe some codes will help. :) – Darleen 30/12, 2009 at 1:2

Theres a lot of code, what I said above is just a very simple version of what I'm doing. I call the events after the DOM is loaded a method is called to add events to the thumbnails. – Mannino 30/12, 2009 at 1:6

possible duplicate of How can I determine if an image has loaded, using Javascript/jQuery? – Cloaca 28/6, 2013 at 22:35

B

273

Another option is to trigger the onload and/or onerror events by creating an in memory image element and setting its src attribute to the original src attribute of the original image. Here's an example of what I mean:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;

Boxthorn answered 30/12, 2009 at 1:59 Comment(12)

Hmm that seems to work, and after a few tests it doesn't seem to hurt the loading of the image either. Thanks! – Mannino 30/12, 2009 at 2:10

Doesn't seem to be working as well as I hoped. In Google Chrome it seems to be having issues when the image is already in cache. It doesn't trigger the load() method. :( – Mannino 30/12, 2009 at 3:5

Ugg, you're right. Chrome is definitely the most annoying browser to develop for. On the bright, I think I may have found a work around: set the image source to "" then back to the original source. I'll update my answer. – Boxthorn 30/12, 2009 at 3:25

Looks like we were both thinking the same thing. It seems to work so far. I'll write back if I find another bug but so far it's working good. :) – Mannino 30/12, 2009 at 3:28

Doesn't play well with IE6. It likes to cause an error event when changing the src. Also, in IE6 when you change the src it creates a new HTTP request. :( – Mannino 31/12, 2009 at 21:23

I've updated the answer with a solution that works in all browsers and avoids unnecessary HTTP requests. – Boxthorn 24/12, 2011 at 11:17

You should put the .attr line after the .load and .error lines. Otherwise you risk that the image might load (or encounter an error) before those callbacks are added, and they won't be called. – Etheridge 7/2, 2012 at 11:32

@Mannino you're right, load() might not trigger if the image is in cache. One solution is to append a unique query string to the URI, like '?' + Math.random(). Browsers should then ignore the local cached version. – Nardi 10/2, 2012 at 5:40

@Boxthorn Chrome is not the most annoying browser to develop for, try developing for Internet Explorer 7 or less. Besides adding a $_GET parameter to the image load, will load a new image everytime, like Gromix suggested. – Carranza 14/1, 2013 at 23:51

The .load() and .error() methods are confusing and now deprecated, use .on() and use the load and error as events. – Collencollenchyma 8/3, 2014 at 20:12

the answer below is better. check for complete and naturalWidth, otherwise you're just using extra bandwidth for something you don't need to – Imago 23/2, 2015 at 19:12

The issue with the IsImageOk is that when false is returned, it's unclear whether an error occurred or if the image simply hasn't finished loading. So you're be force to create a busy loop calling IsImageOk over and over again. As for bandwidth usage, when you create the in-memory version of an image, it's very likely that the image data will be pulled from the browser's cache. In my experience, only older versions of IE issue another GET request. – Boxthorn 23/2, 2015 at 23:37

H

285

Check the complete and naturalWidth properties, in that order.

https://stereochro.me/ideas/detecting-broken-images-js

function IsImageOk(img) {
    // During the onload event, IE correctly identifies any images that
    // weren’t downloaded as not complete. Others should too. Gecko-based
    // browsers act like NS4 in that they report this incorrectly.
    if (!img.complete) {
        return false;
    }

    // However, they do have two very useful properties: naturalWidth and
    // naturalHeight. These give the true size of the image. If it failed
    // to load, either of these should be zero.
    if (img.naturalWidth === 0) {
        return false;
    }

    // No other way of checking: assume it’s ok.
    return true;
}

Harwilll answered 30/12, 2009 at 1:5 Comment(12)

Interesting, I was looking at that post earlier and I didn't realize that they were doing ! complete for IE as naturalWidth is not defined in IE. Going to check it now. – Mannino 30/12, 2009 at 1:7

I think I should have explained better in my main question. I'm calling this after I add the events for load,error so that if it already had an error I will know. This method returns false even if a method is still "loading" and it has 0 errors. I need something to check if it has had an error, if it's still loading / complete then it should return true. Thanks for the answer though – Mannino 30/12, 2009 at 1:30

Updated, let me know if you want anymore details. Thanks for the help – Mannino 30/12, 2009 at 1:51

Apparently, this only works reliably the first time. If you then change the src of the image, at least safari mobile will keep reporting the first value for both naturalWidth and complete. – Alcaraz 23/4, 2013 at 9:20

return img.complete && typeof img.naturalWidth != 'undefined' && img.naturalWidth != 0; – Gainer 19/1, 2014 at 13:8

so what now? hammer the CPU with an interval, nagging it to check if the image has been loaded already? maybe it's dead and out interval will continue for a long time? – Stambul 29/3, 2014 at 21:36

@Stambul you would probably want to use this as a one-time check, and if the image has not yet loaded, set up a "load" event handler. There shouldn't be any need to hammer the CPU by running this check multiple times. – Ryanryann 15/4, 2014 at 15:3

@Harwilll First thing to note: naturalWidth & naturalHeight are "only" IE9+ compatible, see this for cross-browser support https://mcmap.net/q/66062/-is-there-any-way-to-read-out-the-quot-naturalwidth-quot-of-an-image-with-jquery. Second thing to note: your answer is similar to this answer https://mcmap.net/q/66063/-browser-independent-way-to-detect-when-image-has-been-loaded inspired from this article from StereoChrome written in 2005 stereochro.me/ideas/detecting-broken-images-js – Curst 13/10, 2014 at 13:7

@MichaelMartin-Smucker seems like your last comment ("you would probably want to use this as a one-time check, and if the image has not yet loaded, set up a "load" event handler.") combines the best of both worlds: allowing to lower the amount of handlers attached, but also probably solving the issue with cached images not triggering the .load() handler. Maybe something like this would work? jsbin.com/qahuqatiyomo/4/edit?js,console,output – Curst 13/10, 2014 at 13:37

For those curious, this is pretty much exactly what the imagesLoaded library linked below does. So, for a one-off usage, go for it: github.com/desandro/imagesloaded/blob/master/… – Circumstance 13/11, 2018 at 0:27

Doesn't work for SVG, naturalHeight and naturalWidth returns 0 – Jonellejones 24/4, 2020 at 7:28

The complete property, by itself, is now well supported. – Sallie 18/12, 2023 at 14:11

B

273

Another option is to trigger the onload and/or onerror events by creating an in memory image element and setting its src attribute to the original src attribute of the original image. Here's an example of what I mean:

$("<img/>")
    .on('load', function() { console.log("image loaded correctly"); })
    .on('error', function() { console.log("error loading image"); })
    .attr("src", $(originalImage).attr("src"))
;