flexslider中的GIF滑块，如何在滑块上启动gif

Question

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

任何人都知道如何才能开始使用GIF  滑块？

Answer 1

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

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

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

2. 根据this question的建议，您可以创建图片精灵而不是动画GIF。

您是否尝试过其中任何一种方法？

Answer 2

我终于在测试一小时后找到了解决方案，将before函数添加到声明代码中，并将下一个src的{​​{1}}更改为空并返回到原来img做的工作，如下：

JS：

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

src

它的作品非常适合我。

请参阅 JS Fiddle （您可以注意到gif中的计数器始终为10，没有 $('.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); } }); 函数，您发现计数器已经启动），希望有所帮助