jQuery fadein изображение при изменении затем fadeout при загрузке

Question

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

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

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

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

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

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

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

Answer 2

Фиксированный с

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