JQuery скрыть изображение, содержание изменения, показать изображение

Question

Ищу правильный способ сделать следующее:

$("#some-image").fadeOut(); 
$("#some-image").attr("src", "new-src.png"); 
$("#some-image").fadeIn(); 

Для целей синхронизации, следующие множества его ближе, но я знаю, что это все-таки неправильно:

$("#some-image").fadeOut(function(){ 
    $(this).attr("src", "new-src.png").fadeIn(); 
}); 

Что такое правильный способ сделать следующее, в следующем порядке:

1. Fade Out Image
2. После изображения исчезла, загрузите новый SRC
3. После нового изображения полностью загружены, увядает изображение обратно в

Ура!

Answer 1

Ваша проблема может быть, что новый образ не не загружается до тех пор, после элемента DOM, содержащего уже утрачен в Убедитесь, что изображение полностью загружен перед вызовом FadeIn():.

$("#some-image").fadeOut(function(){ 
    var tgt = $(this), 
     img = new Image, 
     src = "new-src.png"; 
    img.onload = function() { 
     tgt.attr('src', src).fadeIn(); 
    }; 
    img.src = src; 
}); 

еще лучше, загрузите изображение загодя:

<script> 
    // Outside of $(function() {}) 
    function preload_img(src) { 
     var img = new Image; 
     img.src = src; // loads immediately, maybe even before DOMReady 
    } 
</script> 

Тогда вам не придется беспокоиться о том, имеет ли или не был загружен образом, когда пользователь запускает ваш FadeIn/Out.

Answer 2

Используйте функцию обратного вызова. Как только fadeOut завершится, мы изменим src и затухаем изображение после того, как src был изменен.

$("#some-image").fadeOut(function(){ 
    //after the fadeout completes, change the src of the image. 
    $(this).attr("src", "new-src.png").fadeIn();  
});