使用 jquery 从一张图片淡入另一张图片

Question

I can change picture by clicking or fade it to another by fadein or fadeout. But i wanna load a loading.gif in between two pictures.

I have:

pic1.jpg
loading.gif
pic2.jpg

Which pic1 is default, And after 4 seconds, i wanna show the loading on pic1 and meanwhile load the pic2 and when pic2 loaded completely, the loading.gif disappears and pic1 fade into pic2.

Answer 1

Do you wanna do like this?

 $(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>