How do you identify when an image is done downloading with jQuery?

I am using form input to change the source of an img tag on the fly. I want to put an ajax loader 开发者_如何学Goin place of the image until the image is done downloading, and then replace the loader with the new image. Anyone know how I can do this?

You need no jQuery to know when an image was loaded.

    // show animation that indicates image is loading
    var test = new Image();
    test.onload = function () {
        // this gets called when the image has loaded
        // we need to place the image on the page:
        $('#ImageContainerWhatever').append(test);
        // and hide the loading animation
    };
    test.src = 'my_image.png';

onload is called when the browser loads the image it doesn`t matter if from the web or local cache.

See those examples: https://developer.mozilla.org/en/Canvas_tutorial/Using_images

You can add an event listener to the load event of an image.