Friday 27th July 2007

by Mr Me

image loaded

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

· · · ◊ ◊ ◊ · · ·

10 Responses to “Javascript: Check an image is Loaded or Not”

  1. Jonathan says:

    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.

  2. Aagust kk says:

    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.

  3. rolfen says:

    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.

  4. joy says:

    NOT UNDERSTAND

  5. Chris says:

    Hi Sajith,

    This is something new I am hearing. Will surely try this out next time, when in need.

    Thank You.

  6. David says:

    This is awsome. Ended my image loader head aches. Thank you!

  7. Alexandra says:

    Thank you!
    Very useful info.

· · · ◊ ◊ ◊ · · ·

Leave a Reply

Need your support
More in html, webworld (65 of 72 articles)


IE (Internet Explorer) Form Tag problem Most of the desingners of html , perhaps faced this problem, that when ...