Javascript: Check an image is Loaded or Not
How can we check whether an image is loaded fully or
partially using javascript. It is possible
See the Example Below.
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 (typeof img.naturalWidth
!= “undefined” && img.naturalWidth
== 0) {
return false;
}
// No other way of checking: assume it’s ok.
return true;
}
//Call this function onLoad of body tag
function checkImages() {
for (var i = 0; i < document.images.length; i++) {
if (!IsImageOk(document.images[i])) {
document.images[i].src = “/images/loaderror.jpg“;
}
}
}
Thank you!
Very useful info.
This is awsome. Ended my image loader head aches. Thank you!
Hi Sajith,
This is something new I am hearing. Will surely try this out next time, when in need.
Thank You.
NOT UNDERSTAND
It didn’t work for me, in IE8, it did not seem to detect an image which was preloaded as a background through inline CSS.
I had an image loading queue to load a big number of images. One (only one!) of these images was already used as a CSS background. In IE8, when the queue got to this image, it requested it, then waited for the image to be loaded (ie the load even to fire) before proceeding to the next image in the queue. But that load event never came, so the queue always froze at that point. I tried to use your code to detect whether the image is already loaded, but it didn’t do it. I finally manually removed the problematic image from the loading queue and the rest works normally now.
Copied from –
http://talideon.com/weblog/2005/02/detecting-broken-images-js.cfm
without mentioning the author.
Hi Saarthak, same code is available in more than 100 websites
Not only in the one you mentioned.
Just because lots of people steal it doesn’t mean it;s not stealing.
If Facebook or Twitter is blocked in any Organisation or any System.
I want to display my custom message in the field of Twitter, Facebook widget or in the field of Facebook like button by using JAVASCRIPT.
I tried this. It works in IE about half the time. If I load the same page in the browser with this code repeatedly, sometimes IE thinks the image is complete, and sometimes it thinks it’s not, even though it is.