flexslider 中的 GIF 滑块，如何仅在滑块上时才开始 gif

Question

现在我有一个带有四张幻灯片的 flexslider。第三个滑块是一个 gif 而不是像其他滑块一样的 jpg。我遇到的问题是，这第三个 gif 滑块显然在到达页面时立即启动，而不是在您实际到达该滑块时启动。当点击前两个滑块时，gif 就差不多完成了。

任何人都知道我如何在到达 GIF 时才开始制作 GIF 滑块？

Answer 1

据我所知，使用代码 pause/stop/play GIF 动画是不可能的。

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

某些浏览器在元素实际出现在屏幕上之前不会启动 GIF 动画，因此您可以隐藏图像直到幻灯片处于活动状态然后 $('#MyGifImage').show()。但是，您需要测试它在各种浏览器中的表现。
按照 this question 中的建议，您可以创建图像精灵而不是动画 GIF。

你试过这两种方法吗？

Answer 2

我测试了一个小时终于找到了解决办法，把before函数加到你的声明代码中，把nextimg的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功能你会发现计数器已经开始), 希望有所帮助。

flexslider 中的 GIF 滑块，如何仅在滑块上时才开始 gif

GIF slider in flexslider, how to begin the gif only when on slider

javascript

css

slider

gif

flexslider