Implement Loader Image for JQuery / Javascript Image Gallery using .load();

I am using the code below for an image gallery and would like to show a loader gif in the background when images are loading and then remove it once the image is loaded.

What is the best way to do this?

Note: I have attached .fadeIn() and .fadeOut() before with not much luck(it seemed as both w开发者_JAVA百科ere appearing simultaneously.

    $('ul a').click(function(e) {
        e.preventDefault();
        var src = $(this).attr("href");
        $('#main-img img').fadeOut(400,
        function() {
            $('<img/>').attr('src', src).load(function() {                  
                $('#main-img img').attr('src', this.src).fadeIn(400);
            })
        })
    });                                          

I put together a JSFiddle that seems to be working (red is your loading image). Perhaps you registered your click before the DOM was fully loaded? The only thing I see different is that I register it on Document Ready.

http://jsfiddle.net/sSt3x/2/

Note, the Images are VERY big (4000x4000 or so) so give it a moment and the first image is not faded, so it takes a moment to load initially. Adjust as necessary for your behavior.