By William


2009-12-30 00:58:21 8 Comments

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.

14 comments

@KhaledDev 2018-03-25 08:09:49

var isImgLoaded = function(imgSelector){
  return $(imgSelector).prop("complete") && $(imgSelector).prop("naturalWidth") !== 0;
}

// Or As a Plugin

    $.fn.extend({
      isLoaded: function(){
        return this.prop("complete") && this.prop("naturalWidth") !== 0;
      }
    })

// $(".myImage").isLoaded() 

@Frank 2017-12-15 12:52:05

This snippet of code helped me to fix browser caching problems:

$("#my_image").on('load', function() {

    console.log("image loaded correctly"); 
}).each(function() {

     if($(this).prop('complete')) $(this).load();
});

When the browser cache is disabled, only this code doesn't work:

$("#my_image").on('load', function() {
     console.log("image loaded correctly"); 
})

to make it work you have to add:

.each(function() {
     if($(this).prop('complete')) $(this).load();
});

@SLaks 2009-12-30 01:05:09

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;
}

@William 2009-12-30 01:07:23

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.

@William 2009-12-30 01:30:47

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

@SLaks 2009-12-30 01:42:29

You should edit your question.

@William 2009-12-30 01:51:19

Updated, let me know if you want anymore details. Thanks for the help

@nornagon 2011-05-31 08:38:12

You can just check img.naturalWidth === 0, no need to test that the type is not undefined.

@giorgian 2013-04-23 09:20:32

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.

@Adrian Seeley 2014-01-19 13:08:42

return img.complete && typeof img.naturalWidth != 'undefined' && img.naturalWidth != 0;

@vsync 2014-03-29 21:36:14

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?

@Michael Martin-Smucker 2014-04-15 15:03:25

@vsync 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.

@Adrien Be 2014-10-13 13:07:20

@SLaks First thing to note: naturalWidth & naturalHeight are "only" IE9+ compatible, see this for cross-browser support stackoverflow.com/a/7869044/759452. Second thing to note: your answer is similar to this answer stackoverflow.com/a/3016076/759452 inspired from this article from StereoChrome written in 2005 stereochro.me/ideas/detecting-broken-images-js

@Adrien Be 2014-10-13 13:37:55

@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

@Roman 2015-03-24 17:45:51

This method is 10 years old now. What a retro :)

@Ajedi32 2016-01-11 16:21:37

@FlameStorm 2017-03-16 22:06:12

@Roman, it's okay. Software and hardware for Voyagers was made in 1977 and still work. This is good approach. ;)

@cincodenada 2018-11-13 00:27:36

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/…

@Scoobeedo Cool 2017-02-27 06:36:27

I had a lot of problems with the complete load of a image and the EventListener.

Whatever I tried, the results was not reliable.

But then I found the solution. It is technically not a nice one, but now I never had a failed image load.

What I did:

                    document.getElementById(currentImgID).addEventListener("load", loadListener1);
                    document.getElementById(currentImgID).addEventListener("load", loadListener2);

                function loadListener1()
                    {
                    // Load again
                    }

                function loadListener2()
                {
                    var btn = document.getElementById("addForm_WithImage"); btn.disabled = false;
                    alert("Image loaded");
                }

Instead of loading the image one time, I just load it a second time direct after the first time and both run trough the eventhandler.

All my headaches are gone!


By the way: You guys from stackoverflow helped me already more then hundred times. For this a very big Thank you!

@Ajedi32 2016-01-11 16:49:19

Based on my understanding of the W3C HTML Specification for the img element, you should be able to do this using a combination of the complete and naturalHeight attributes, like so:

function imgLoaded(imgElement) {
  return imgElement.complete && imgElement.naturalHeight !== 0;
}

From the spec for the complete attribute:

The IDL attribute complete must return true if any of the following conditions is true:

  • The src attribute is omitted.
  • The final task that is queued by the networking task source once the resource has been fetched has been queued.
  • The img element is completely available.
  • The img element is broken.

Otherwise, the attribute must return false.

So essentially, complete returns true if the image has either finished loading, or failed to load. Since we want only the case where the image successfully loaded we need to check the nauturalHeight attribute as well:

The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and height of the image, in CSS pixels, if the image is available, or else 0.

And available is defined like so:

An img is always in one of the following states:

  • Unavailable - The user agent hasn't obtained any image data.
  • Partially available - The user agent has obtained some of the image data.
  • Completely available - The user agent has obtained all of the image data and at least the image dimensions are available.
  • Broken - The user agent has obtained all of the image data that it can, but it cannot even decode the image enough to get the image dimensions (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

When an img element is either in the partially available state or in the completely available state, it is said to be available.

So if the image is "broken" (failed to load), then it will be in the broken state, not the available state, so naturalHeight will be 0.

Therefore, checking imgElement.complete && imgElement.naturalHeight !== 0 should tell us whether the image has successfully loaded.

You can read more about this in the W3C HTML Specification for the img element, or on MDN.

@deathangel908 2017-04-30 21:12:16

Doesn't work is image is loaded with style "content: url"

@Julha 2016-04-20 00:52:27

Retrieve informations from image elements on the page
Test working on Chrome and Firefox
Working jsFiddle (open your console to see the result)

$('img').each(function(){ // selecting all image element on the page

    var img = new Image($(this)); // creating image element

    img.onload = function() { // trigger if the image was loaded
        console.log($(this).attr('src') + ' - done!');
    }

    img.onerror = function() { // trigger if the image wasn't loaded
        console.log($(this).attr('src') + ' - error!');
    }

    img.onAbort = function() { // trigger if the image load was abort
        console.log($(this).attr('src') + ' - abort!');
    }

    img.src = $(this).attr('src'); // pass src to image object

    // log image attributes
    console.log(img.src);
    console.log(img.width);
    console.log(img.height);
    console.log(img.complete);

});

Note : I used jQuery, I thought this can be acheive on full javascript

I find good information here OpenClassRoom --> this is a French forum

@Ajay Gupta 2015-12-04 11:53:43

Using this JavaScript code you can check image is successfully loaded or not.

document.onready = function(e) {
        var imageobj = new Image();
        imageobj.src = document.getElementById('img-id').src;
        if(!imageobj.complete){ 
            alert(imageobj.src+"  -  Not Found");
        }
}

Try out this

@Kal 2013-07-31 01:15:01

I tried many different ways and this way is the only one worked for me

//check all images on the page
$('img').each(function(){
    var img = new Image();
    img.onload = function() {
        console.log($(this).attr('src') + ' - done!');
    }
    img.src = $(this).attr('src');
});

You could also add a callback function triggered once all images are loaded in the DOM and ready. This applies for dynamically added images too. http://jsfiddle.net/kalmarsh80/nrAPk/

@Alex Karshin 2015-04-29 16:43:09

jsfiddle link broken

@Kal 2015-09-04 22:45:00

link updated @Flexbox.cz

@danjah 2016-12-09 03:00:59

I've tested the interesting reads above and they fail between cached/uncached tests on a handful of common browsers. This answer is similar to another but is the one I implemented & tested just now, I can confirm it works on: EdgeWin10, IE11Win8.1, Win7IE10, Win7IE9, iOS 10.2 Chrome, iOS 10.2 Safari, mac os 10.12 Chrome, mac os 10.12 Safari, mac os 10.12 Firefox, Google Pixel 7.1, Samsung S5 Android 4.4. Don't forget to use addEventListener/removeEventListener too :D

@data-dan 2015-07-28 17:53:58

After reading the interesting solutions on this page, I created an easy-to-use solution highly influenced by SLaks' and Noyo's post that seems to be working on pretty recent versions (as of writing) of Chrome, IE, Firefox, Safari, and Opera (all on Windows). Also, it worked on an iPhone/iPad emulator I used.

One major difference between this solution and SLaks and Noyo's post is that this solution mainly checks the naturalWidth and naturalHeight properties. I've found that in the current browser versions, those two properties seem to provide the most helpful and consistent results.

This code returns TRUE when an image has loaded fully AND successfully. It returns FALSE when an image either has not loaded fully yet OR has failed to load.

One thing you will need to be aware of is that this function will also return FALSE if the image is a 0x0 pixel image. But those images are quite uncommon, and I can't think of a very useful case where you would want to check to see if a 0x0 pixel image has loaded yet :)

First we attach a new function called "isLoaded" to the HTMLImageElement prototype, so that the function can be used on any image element.

HTMLImageElement.prototype.isLoaded = function() {

    // See if "naturalWidth" and "naturalHeight" properties are available.
    if (typeof this.naturalWidth == 'number' && typeof this.naturalHeight == 'number')
        return !(this.naturalWidth == 0 && this.naturalHeight == 0);

    // See if "complete" property is available.
    else if (typeof this.complete == 'boolean')
        return this.complete;

    // Fallback behavior: return TRUE.
    else
        return true;

};

Then, any time we need to check the loading status of the image, we just call the "isLoaded" function.

if (someImgElement.isLoaded()) {
    // YAY! The image loaded
}
else {
    // Image has not loaded yet
}

Per giorgian's comment on SLaks' and Noyo's post, this solution probably can only be used as a one-time check on Safari Mobile if you plan on changing the SRC attribute. But you can work around that by creating an image element with a new SRC attribute instead of changing the SRC attribute on an existing image element.

@Xavi 2009-12-30 01:59:11

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"))
;

Hope this helps!

@William 2009-12-30 02:10:54

Hmm that seems to work, and after a few tests it doesn't seem to hurt the loading of the image either. Thanks!

@William 2009-12-30 03:05:27

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. :(

@Xavi 2009-12-30 03:25:27

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.

@William 2009-12-30 03:28:44

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. :)

@William 2009-12-31 21:23:18

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. :(

@Xavi 2011-12-24 11:17:22

I've updated the answer with a solution that works in all browsers and avoids unnecessary HTTP requests.

@callum 2012-02-07 11:32:53

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.

@Xavi 2012-02-07 17:13:24

True, I'll make the change.

@Romain 2012-02-10 05:40:06

@William 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.

@Muhd 2012-03-14 22:10:30

@Gromix but then your stuff will take longer to load...

@SSH This 2013-01-14 23:51:45

@Xavi 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.

@Firsh - LetsWP.io 2014-03-08 20:12:13

The .load() and .error() methods are confusing and now deprecated, use .on() and use the load and error as events.

@Funkodebat 2015-02-23 19:12:37

the answer below is better. check for complete and naturalWidth, otherwise you're just using extra bandwidth for something you don't need to

@Xavi 2015-02-23 23:37:15

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.

@Josh Harrison 2013-11-13 16:58:19

@Rooster242 2014-03-11 18:23:33

This worked perfectly for me. function checkImages(imgs) { $(imgs).each(function() { $(imgs).imagesLoaded() .progress(function(instance, image) { if(image.isLoaded == false) { console.log(image.img.src + ' could not be found.'); image.img.src = "/templates/img/no-image.jpg"; } }); }); }

@vsync 2014-03-29 22:07:42

it seems to have TON of open issues which major bugs, and the developer's doesn't seem to do much catching up with them. as of now, this is totally unusable in a production environment.

@Josh Harrison 2014-04-23 11:43:05

@vsync Have you read some of the open issues? He responds to nearly all of them, and most seem to be unreproducible edge-cases which few others encounter. I've never had a problem with it in production.

@vsync 2014-04-23 15:01:28

yes I use it myself and sometimes it doesn't work, so I use a setTimeout to cover cases where it fails

@Adrien Be 2014-10-15 09:23:18

There are good reasons WHY one want to use the imagesLoaded plugin: complete property does not seem to be clearly supported: unable to find a reliable source of info regarding browser support. complete property also doesn't seem to have clear specification: the HTML5 spec is the only one mentioning it & it's still in a draft version at the time of writting. If you use naturalWidth & naturalHeight only have IE9+ support, so if you use it to find out if the image is loaded, you need some "clever" trick to make it work on old browsers, & you must check cross-browser behavior is consistent

@Adrien Be 2014-10-27 12:14:22

Backing up my previous comment: w3.org/html/wg/drafts/html/master/… - the only spec regarding the "complete" property. w3.org/TR/html401/struct/objects.html#h-13.2 - HTML4 spec : nothing mentioned about "complete" property. developer.mozilla.org/en/docs/Web/API/HTMLImageElement - bottom table shows support for the "complete" property as unknown (question mark). Finally, regarding naturalWidth & naturalHeight browser support stackoverflow.com/questions/6900177/…

@El Yobo 2015-10-13 01:37:58

Even imagesLoaded seems to fail for the situation where an image returns a 404 and content, e.g. YouTube's thumbnails where the video is valid but no such thumbnail exists.

@Jenei Tamás 2013-10-16 14:46:25

Realtime network detector - check network status without refreshing the page: (it's not jquery, but tested, and 100% works:(tested on Firefox v25.0))

Code:

<script>
 function ImgLoad(myobj){
   var randomNum = Math.round(Math.random() * 10000);
   var oImg=new Image;
   oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
   oImg.onload=function(){alert('Image succesfully loaded!')}
   oImg.onerror=function(){alert('No network connection or image is not available.')}
}
window.onload=ImgLoad();
</script>

<button id="reloadbtn" onclick="ImgLoad();">Again!</button>

if connection lost just press the Again button.

Update 1: Auto detect without refreshing the page:

<script>
     function ImgLoad(myobj){
       var randomNum = Math.round(Math.random() * 10000);
       var oImg=new Image;
       oImg.src="YOUR_IMAGELINK"+"?rand="+randomNum;
       oImg.onload=function(){networkstatus_div.innerHTML="";}
       oImg.onerror=function(){networkstatus_div.innerHTML="Service is not available. Please check your Internet connection!";}
}

networkchecker = window.setInterval(function(){window.onload=ImgLoad()},1000);
</script>

<div id="networkstatus_div"></div>

@Sen Jacob 2014-12-04 12:33:13

100%! What if your image link is blocked by a proxy/firewall or the image server not responding? You still have the network working :)

@Marius Balčytis 2015-11-22 17:03:39

This will load every image once again from the server, busting the cache (intentionally). So just for checking, you're (at least) doubling bandwidth for all of your images. Besides, it checks only if image exists on the server, not whether it was loaded in some specific place. Also no way to know when each image is loaded.

@Justin Vincent 2013-03-30 19:01:09

This is how I got it to work cross browser using a combination of the methods above (I also needed to insert images dynamically into the dom):

$('#domTarget').html('<img src="" />');

var url = '/some/image/path.png';

$('#domTarget img').load(function(){}).attr('src', url).error(function() {
    if ( isIE ) {
       var thisImg = this;
       setTimeout(function() {
          if ( ! thisImg.complete ) {
             $(thisImg).attr('src', '/web/css/img/picture-broken-url.png');
          }
       },250);
    } else {
       $(this).attr('src', '/web/css/img/picture-broken-url.png');
    }
});

Note: You will need to supply a valid boolean state for the isIE variable.

@user1018645 2011-10-28 15:31:53

As I understand the .complete property is non-standard. It may not be universal... I notice it seem to work differently in Firefox verses IE. I am loading a number of images in javascript then checking if complete. In Firefox, this seems to work great. In IE, it doesn't because the images appear to be loading on another thread. It works only if I put a delay between my assignment to image.src and when I check the image.complete property.

Using image.onload and image.onerror isn't working for me, either, because I need to pass a parameter to know which image I am talking about when the function is called. Any way of doing that seems to fail because it actually seems to pass the same function, not different instances of the same function. So the value I pass into it to identify the image always ends up being the last value in the loop. I cannot think of any way around this problem.

On Safari and Chrome, I am seeing the image.complete true and the naturalWidth set even when the error console shows a 404 for that image... and I intentionally removed that image to test this. But the above works well for Firefox and IE.

@Xavi 2011-12-24 11:21:37

Hmm, that's interesting. Would mind posting a code example so I want try a couple of things out?

Related Questions

Sponsored Content

55 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

61 Answered Questions

[SOLVED] How to check whether a checkbox is checked in jQuery?

40 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 715264 View
  • 2591 Score
  • 40 Answer
  • Tags:   javascript jquery

3 Answered Questions

29 Answered Questions

[SOLVED] jQuery scroll to element

  • 2011-07-13 09:49:44
  • DiegoP.
  • 2260343 View
  • 2120 Score
  • 29 Answer
  • Tags:   javascript jquery

38 Answered Questions

[SOLVED] Lazy load of images in ListView

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

22 Answered Questions

[SOLVED] JavaScript that executes after page load

15 Answered Questions

[SOLVED] "Thinking in AngularJS" if I have a jQuery background?

10 Answered Questions

[SOLVED] Official way to ask jQuery wait for all images to load before executing something

  • 2009-02-13 06:56:25
  • Simon_Weaver
  • 333905 View
  • 621 Score
  • 10 Answer
  • Tags:   jquery

Sponsored Content