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

Posted 2023-03-06

【中文标题】flexslider 中的 GIF 滑块，如何仅在滑块上开始 gif

【英文标题】：GIF slider in flexslider, how to begin the gif only when on slider

【发布时间】：2015-10-10 05:27:11

【问题描述】：

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

任何人都知道我将如何开始一个 GIF，只有当一个人达到那个 滑块？

【参考方案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函数你发现计数器已经开始了），希望有所帮助。

【参考方案2】：

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

我知道的解决方法是……

有些浏览器在元素真正出现在屏幕上之前不会启动 GIF 动画，因此您可以隐藏图像直到幻灯片处于活动状态然后$('#MyGifImage').show()。但是，您需要测试它在各种浏览器中的行为方式。

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

你试过这两种方法吗？

【讨论】：

尝试过 sprites 方法，但它似乎有点过时了。至于你的建议#1，有没有办法找出“活动”幻灯片？

@MattC。我想你会发现动画 GIF 是一种比使用 CSS sprites 更古老的技术。是的，Flexslider 有一个可以为你触发事件的 JS API。我现在不在，所以不能为你写代码。