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

问题

Right now I have a flexslider with four slides. The third slider is a gif rather than a jpg like the others. The issue I am having is that this third gif slider apparently starts immediately when the page is reached as opposed to when you actually get to that slider. By the time one clicks through the first two sliders, the gif is just about finished.

Anyone have any idea as to how I would begin a GIF only when one reaches that slider?

回答1:

I finally found the solution for you after one hour of test, add the before function to your declaration code, and change the src of next img to empty and back to the original src do the work, like bellow :

JS :

this code will init the gif just before the display.

  $('.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);
    }
  });

Its work perfectly for me.

See JS Fiddle (you can notice that the counter in gif always start by 10, without before function you find that the counter is already start), hope that help.

回答2:

As far as I know, it's not really possible to pause/stop/play GIF animations using code.

The workarounds I know of are...

Some browsers won't start the GIF animation until the element is actually visible on the screen, so you could hide the image until the slide is active and then $('#MyGifImage').show(). You'll need to test how this behaves in various browsers, however.
As suggested in this question you could create image sprites instead of an animated GIF.

Have you tried either of those methods?

来源：https://stackoverflow.com/questions/31527534/gif-slider-in-flexslider-how-to-begin-the-gif-only-when-on-slider

标签

javascript

css

slider

gif

flexslider