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

Question

我可以通过单击更改图片或通过淡入淡出将其淡化为另一张图片。但是我想在两张图片之间加载一个loading.gif。

我有：

pic1.jpg
loading.gif
pic2.jpg

默认图片1，4秒后，我想在图片1上显示加载，同时加载图片2，当图片2完全加载时，loading.gif消失，图片1淡入图片2。

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>

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

Fading from one image to another with jquery

jquery

fadeout

fadein