jQuery wait for dynamic images to load

So I have a page that is dynamically loading images at user request, basically a random image will pop up when they click a button. I want to find a way to hide the image until it finishes loading and then have it show again. I've tried doing this with jQuery's $(window).load() function and it works perfectly for the first image but when I load the next image the event doesn't fire again. Is there another way to do this, or to reset the load() event? Thanks.

Note开发者_运维知识库: The images in question are rather large animated gifs but they very, some only take a few moments to load and some can take up to 20 seconds.

I have a jQuery plugin called waitForImages that will help with that.

$('#newly-loaded-element').hide().waitForImages(function() {
    $(this).show();
});

Hide it using CSS and listen to each image's load event:

<img style="display: none" class="loadedImage" src="..." />

$(function(){
    $(".loadedImage").live("load", function(){
        $(this).show();
    });
});

its called Lazy-Load and there is a specific JQuery plugin for it.