延迟 x 秒播放 GIF 动画

Question

我正在尝试给gif动画添加一点延迟，使其呈现从左到右的移动效果。我已经尝试使用jQuery的setTimeout方法等待几秒钟再显示gif动画。但问题是，这两个gif动画同时加载，并且会同步播放。以下是我遇到的基本示例...

setTimeout(function() {
  $('.dots-animation-delay').show();
}, 2500);

div {
  float: left;
  width: 33%;
  text-align: center;
}

.dots-animation {
  position: absolute;
  padding-left: 5%;
}

.dots-animation-delay {
  position: absolute;
  padding-left: 5%;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  LEFT
  <img class="dots-animation" src="https://s1.gifyu.com/images/dots.gif">
</div>

<div>
  MIDDLE
  <img class="dots-animation-delay" src="https://s1.gifyu.com/images/dots.gif">
</div>

<div>RIGHT</div>

JSFiddle

我希望交替播放动画，使得左侧的淡出时右侧的淡入。是否有其他jQuery方法或CSS关键帧可以实现这一点？

- Painguin

---

setTimeout 是一个原生的 JavaScript 函数，只是想强调一下。 - Isaac Vidrine

Answer 1

由于图片已被缓存，所以第二次调用将拉取相同的图像。您可以使用缓存破坏器来让浏览器认为它是不同的图像。

然后，您希望以随机超时的方式动态添加图像到页面上，这样第一张图像加载时它不会加载。否则，它们将同步。您不希望使用一个圆整数，因为它更有可能同步。

setTimeout(function(){
$('<img class="dots-animation-delay" src="https://s2.gifyu.com/images/dots.gif?123">').appendTo($('.middle'));
}, 2638)

.float-left {
  float: left;
  width: 33%;
  text-align: center;
}

.dots-animation {
  position: absolute;
  padding-left: 5%;
}

.dots-animation-delay {
  position: absolute;
  padding-left: 5%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <div class="float-left">
      LEFT
      <img class="dots-animation" src="https://s2.gifyu.com/images/dots.gif">
    </div>
    <div class="float-left middle">
       MIDDLE
    </div>
    <div class="float-left">RIGHT</div>
</div>

- Jennifer Goncalves

---

太棒了！非常感谢这个。我已经想了好一会儿了。 - Painguin