Затухание от одного изображения к другому с помощью jquery

Question

Я могу изменить изображение, щелкнув или перетащив его в другое с помощью fadein или fadeout. Но я хочу загрузить load.gif между двумя картинками.

у меня есть:

pic1.jpg 
loading.gif 
pic2.jpg 

Какой pic1 по умолчанию, и через 4 секунды, я хочу показать нагрузку на pic1 и тем временем загрузки pic2 и когда pic2 загружен полностью, loading.gif исчезает и Pic1 замирание в pic2.

Answer 1

Вы хотите сделать это?

$(function() { 
 
    flag = true; 
 
    setInterval(function() { 
 
    $("img").fadeOut(400, function() { 
 
     $("img").attr("src", (flag) ? "http://lorempixel.com/400/200/animals/1/" : "http://lorempixel.com/400/200/nature/1/").delay(500).fadeIn(400); 
 
     flag = !flag; 
 
    }); 
 
    }, 2500); 
 
});

.img-holder {width: 400px; height: 200px; background: url("http://www.ajaxload.info/images/exemples/21.gif") center center no-repeat;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="img-holder"> 
 
    <img class="img" src="http://lorempixel.com/400/200/nature/1/" /> 
 
</div>