0

I want to create an image and then have a gif play after it, repeating indefinitely. When I link to this GIF it loops just fine in my browser. However, when I toggle its display with show()/hide():

var pics = $('.slider');
function autoSlideIn() {
    if (index > pics.length - 1) {
        index = 0;
    }
    $(pics[index]).show();
    setTimeout("autoSlideOut()", duration);
}

function autoSlideOut() {
    if (index > pics.length - 1) {
        index = 0;
    }
    $(pics[index]).hide();
    index++;
    autoSlideIn();
}

<img class="slider" src="www.image.com/picture.png"/>
<img class="slider" src="www.gifdontwork.com/gif.gif"/>

Instead, the GIF will play only once and then be stuck on a single frame and never restart despite it repeating normally. How can I restart it without reloading the image?

jokul
  • 1,269
  • 16
  • 37
  • There is a lot of information missing here, you have an array called "pics" but no reference to it here. Can you also supply some markup? – Kyle Muir Oct 01 '13 at 02:28
  • Updated with sample markup. as I stated, it will cycle between the two pictures just fine, but the GIF will not continue repeating after being hidden. – jokul Oct 01 '13 at 12:32
  • I believe this is what you're after: http://stackoverflow.com/questions/10730212/proper-way-to-reset-a-gif-animation-with-displaynone-on-chrome you will need to put a revision number at the end so that the browser doesn't cache it, this will force it to re-download the gif every time, so buyer beware. – Kyle Muir Oct 01 '13 at 22:09
  • I feel like this shouldn't be the only way to do it since the gif refreshes normally in my browser and i'd like to avoid unnecessary network use. – jokul Oct 02 '13 at 13:58

0 Answers0