Изображение jQuery исчезает при изменении, а затем исчезает при загрузке

Question

У меня есть простой слайдер изображений, который я сделал. У меня есть список маленьких изображений, и всякий раз, когда щелкает одно из них, я заменяю источник целевого большого изображения нажатием (+ некоторые манипуляции с src для получения большего изображения с сервера).

Теперь я хочу, чтобы на маленьком изображении щелкнуло, чтобы затемнить большое изображение, и при загрузке нового изображения, чтобы оно исчезло.

Попробовал с этим кодом:

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

Проблема заключается в том, что когда браузер кэширует изображения, изображение onclick немедленно загружается, а затем исчезает, что выглядит немного раздражающим.

Это:

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

совсем не выцветает.

Есть идеи?

Answer 1

Исправлено с

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

Answer 2

Когда я делал что-то подобное, я использовал этот плагин jQuery:

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

Может автоматически загружать большое изображение и заменять маленькое. Библиотека не затухает автоматически, она просто переключает их, но она дает вам ручку для запуска события, когда большое изображение завершает загрузку.