Question

我可以通过点击或通过淡入淡出或淡出淡出来更改图片。但我想在两张图片之间加载一个loading.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>

用jquery从一个图像淡化到另一个图像

1 个答案: