FlexSlider中的GIF滑块，如何在滑块上开始GIF动画？

Question

我现在有一个flexslider，它有四个幻灯片。第三个幻灯片是一个gif而不是像其他幻灯片一样的jpg。问题是，第三个gif幻灯片似乎在页面到达时立即开始播放，而不是当您实际到达该幻灯片时。当您单击前两个滑块时，gif几乎已经结束了。

有没有人知道如何在到达该滑块时仅开始GIF？

- Matt C.

Answer 1

经过一小时的测试，我终于为您找到了解决方案。在您的声明代码中添加before函数，并将下一个img的src更改为空，然后再改回原始src即可完成工作，如下所示：

JS：

此代码将在显示之前初始化gif。

  $('.flexslider').flexslider({
    animation: "slide",
    before: function(slider){
      var src = $(slider).find('.flex-active-slide').next().find('img').attr('src');
      $(slider).find('.flex-active-slide').next().find('img').attr('src','').attr('src',src);
    }
  });

它对我来说完美地工作。

查看 JS Fiddle（您可以注意到gif中的计数器总是从10开始，没有before函数，您会发现计数器已经开始），希望这有所帮助。

- Zakaria Acharki

Answer 2

据我所知，使用代码暂停/停止/播放GIF动画并不是真正可行的。

我知道的解决方法有...

1. 一些浏览器只有在元素实际显示在屏幕上时才会启动GIF动画，因此您可以隐藏图像，直到幻灯片处于活动状态，然后 $('#MyGifImage').show()。但是，您需要测试这在各种浏览器中的行为。

2. 如 this question 中建议的那样，您可以创建图像精灵而不是动画GIF。

你尝试过这两种方法吗？

- Simon East

---

尝试了Sprites方法，但似乎有点过时。至于您的建议＃1，是否有办法找出“活动”幻灯片？ - Matt C.

@MattC。我认为你会发现，动画GIF比使用CSS精灵技术更古老。是的，Flexslider有一个JS API可以为您触发事件。我现在不在，所以不能为您编写代码。 - Simon East