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

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

本文关键字：GIF 开始 中的 滑块 flexslider 何仅      更新时间：2023-09-26

现在我有一个有四个幻灯片的flexslider。第三个滑块是gif格式，而不是其他的jpg格式。我遇到的问题是，这第三个gif滑块显然是立即开始当页面到达，而不是当你真正得到那个滑块。当你点击前两个滑块时，这个gif就差不多完成了。

有谁知道我该如何开始一个GIF只有当一个达到滑块?

经过一个小时的测试，我终于为您找到了解决方案，将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函数你会发现计数器已经开始)，希望有所帮助。

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

我知道的变通方法是…

  1. 一些浏览器在元素在屏幕上实际可见之前不会启动GIF动画，所以你可以隐藏图像，直到幻灯片激活，然后$('#MyGifImage').show()。但是，您需要测试它在不同浏览器中的表现。

  2. 正如这个问题所建议的，你可以创建图像精灵而不是动画GIF。

你试过这两种方法吗?

相关文章：