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. Исчезновение изображения
2. После того, как изображение исчезло, загрузите новый src
3. После новогоизображение полностью загружено, исчезает изображение обратно в

Cheers!

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 и исчезаем imagein после src.

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