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 events creates a GET that I can see and monitor in Firebug.

If I know the name and path of an image, can I watch the relevant XMLHttpRequest to see if the GET has completed?

I do not want to rely on (or use) .onload events for this process.

The pseudo would look something like this...

if (imageObj.GET = 'complete')

Has anyone had any experience of this?

EDIT 1

Thanks to the help from Bart (see below) I have changed my image preloader to store an array of the image objects...

function imagePreLoader(imgname) {
    images[imgnum] = new Image();
    images[imgnum].src = imgpath + imgname;// load the image
    imgnum ++;
}

And then, after all my other functions have run to build the content DIVs, I used the image.complete attribute in the following...

var interval = setInterval(function () {
    imgcount = imgnum - 1; // because the imgnum counter ++ after src is called.
    ok = 1;

    for (i=0; i<imgcount; i++) {
        if (images[i].complete == false){
            ok = 0;
        }
    }

    if (ok == 1) {
        clearInterval(interval);
        showIndexOnLoad();
    }
}, 1000);

This waits until all the images are complete and only triggers the showIndexOnLoad() function when I get the 'ok' from the interval function.

All images now appear as I wanted, all at once with no additional waits for the GETs to catch up.

Well done Bart for putting me on to the image.complete attribute.

回答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/

function load (source) {
    var img = new Image();
    img.src = source;

    console.log('Loading ' + source);

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

function complete(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.

回答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).

来源：https://stackoverflow.com/questions/16648546/how-to-monitor-an-image-source-for-fully-loaded-status

标签

javascript

image

get

xmlhttprequest

onload