title: Restart an animated GIF from JavaScript without reloading the image
body: <p>I am creating a slideshow of animations using animated GIFs. I'm crossfading from one animation to the next. The problem is: the only way I have discovered to ensure that the GIF starts animating from the first frame is to reload it each time it's shown. The GIFs are 200KB or so each, which is way too much bandwidth for a continuous slideshow.</p>
  
  <p>Here's my current code. <code>img</code> and <code>nextimg</code> are <code>&lt;div&gt;</code> tags containing a single <code>&lt;img&gt;</code> each. <code>nextimg_img</code> is the <code>&lt;img&gt;</code> tag corresponding to the next image to be displayed.</p>
  
  <pre><code>var tmp = nextimg_img.attr('src');
  nextimg_img.attr('src', '');
  setTimeout(function() { nextimg_img.attr('src', tmp); }, 0);
  img.fadeOut('slow');
  nextimg.fadeIn('slow');
  </code></pre>
  
  <p>The idea is that it sets the <code>src</code> attribute of the next image to <code>''</code>, then sets it back to the source of the GIF to be displayed.</p>
  
  <p>This works &mdash; it restarts the animation from the beginning &mdash; but the GIFs seem to be redownloaded every time they are displayed.</p>
  
  <p>EDIT: it's a looping slideshow, and I'm trying to avoid reloading the GIFs from the net when they get shown the second/third/subsequent time.</p>