jQuery fadein image on change then fadeout on load

Question

I have some simple image slider that I've made. I have list of small images, and whenever one of them is clicked, I replace source of target big image with clicked (+ some manipulation with src to get bigger image from server).

Now I want on small image click to fadeout big image, and when new image is loaded to fade it in.

Tried with this code:

ul.find('img').click(function() {
    $('#big_image')
        .fadeOut()
        .attr('src', this.src.replace('/small/', '/big/')) // Some other src
        .load(function() {
            $(this).fadeIn();
        });
});

Problem with this is that when browser caches images, onclick image is immediately loaded, and then faded in and out, which looks a bit annoying.

This:

ul.find('img').click(function() {
    $('#big_image')
        .load(function() {
            $(this).fadeIn();
        })
        .attr('src', this.src.replace('/small/', '/big/'))
        .load(function() {
            $(this).fadeIn();
        });
});

does not fade at all.

Any idea?

Answer 1

When I did something like this I used this jQuery plugin:

http://flesler.blogspot.com/2008/01/jquerypreload.html

It can automatically load a large image and replace a small one with it. The library doesn't automatically fade them, it just switches them, but it does give you a handle to trigger an event when the large image is done loading.

Answer 2

Fixed with

ul.find('img').click(function() {
    $('#big_image').fadeOut(500, function() {
        $(this).attr('src', this.src.replace('/small/', '/big/'))
            .load(function() {
                $(this).fadeIn();
            });
    });
});