How To Monitor An Image Source For Fully Loaded Status

I am loading a large number of images into a dynamic DIV and I am using a preloader to get the images. imageObj = new Image(); imageObj.src = imgpath + imgname; Each of these even

Solution 1:

You can watch the complete property of the image to see if the image is fully loaded or not.

Here's an example.

http://jsfiddle.net/t3esV/1/

functionload (source) {
    var img = newImage();
    img.src = source;

    console.log('Loading ' + source);

    var interval = setInterval(function () {
        if (img.complete) {
            clearInterval(interval);
            complete(img);
        }
    }, 400);
};

functioncomplete(img) {
    console.log('Loaded', img.src);
    document.body.appendChild(img);
};

Note: This example fails to clear the interval when something goes wrong and complete is never set to true.

Update

I wrote a simple jQuery.preload plugin to take advantage of the image.complete property.

Solution 2:

This is a very interesting problem, and I am afraid there is no actual solution to this. The load event for images is when the image is being rendered and the browser knows the width and height of it.

What you would be after would be a tag-applicable readystatechange event. Alas, only IE allows you to bind those to non-document elements, so this is not an option.

There are a bunch of plug-ins that allow you to go around it, as well. One pretty hot one is https://github.com/desandro/imagesloaded , which has the added advantage of dealing with all the browser differences very efficiently. It, however, still relies on the load event (and I am pretty sure this is the only way to start doing what you want to do).