javascript - 延迟 gif 动画 x 秒

Question

我正在尝试对 gif 动画进行轻微延迟，使其看起来像是从左到右移动。

我曾尝试使用 jQuery setTimeout 方法等待几秒钟，然后再显示 gif。这个问题是 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 关键帧来实现这一点？

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>