当图像动画出现在我的滑块中时，如何从头开始？答案

【问题标题】：How can I start an image animation from the beginning when it appears in my slider?当图像动画出现在我的滑块中时，如何从头开始？
【发布时间】：2021-02-04 10:09:03
【问题描述】：

我使用 swiper.js 制作了一个滑块，我希望 gif 在我们转到该幻灯片时从头开始动画。我尝试使用 ajax 加载，但 gif 没有重新加载！

swiper.on('slideChange', function() {
  $('#ts .gif').load(document.URL + '#ts .gif');
});

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide d-flex" id="da">
      hello
    </div>
    <div class="swiper-slide" id="ts">
      <div>
        <h3><strong>Digital Agency Support</strong></h3>
      </div>
      <div class="gif">
        <img src="dm.gif" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

【问题讨论】：

好像lazy loading 可以。
这能回答你的问题吗？ Stopping GIF Animation Programmatically
Marc 不确定这是否能回答我的问题，我无法完成这项工作，无论如何得到了我的答案，谢谢。

标签： javascript html ajax gif swiper

【解决方案1】：

遗憾的是，据我所知，没有办法与 gif 交互。实现您想要的一种方法是用静态图像替换 gif，只要它不在焦点上。比如：

swiper.on('slideChange', function() {
  if (swiper.activeIndex == 1 ) {
        document.getElementById("gif").src = "gif.gif";
    }else{
        document.getElementById("gif").src = "image.png";
    }
});

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide d-flex" id="da">
      hello
    </div>
    <div class="swiper-slide" id="ts">
      <div>
        <h3><strong>Digital Agency Support</strong></h3>
      </div>
      <div class="gif">
        <img id="gif" src="image.gif" alt="">
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

【讨论】：