title: Load and display multiple animated gifs at the same time (synchronised) with Javascript
body: <p>I'm by no means any kind of coder or programmer, but I've been trying to load and display some gifs so that they all animate from the beginning at the same time. In other words, I need them to be synchronised.</p>
  
  <p>I've done a lot of Googling and what I've come up with seems to work with Chrome/Safari and Firefox, but as usual, Internet Explorer refuses to cooperate.</p>
  
  <p>My current code is this:</p>
  
  <pre><code>var images = ["thephoto1", "thephoto2", "thephoto3", "thephoto4", "thephoto5"];
  
  function initImages() {
      for (var i = 0; i &lt; images.length; i++) {
          imageId = images[i];
          image = document.getElementById(imageId);
          image.style.visibility = "visible";
      }
  }  
  
  function preloadImages(urls) {
      var img = new Array();
      for (var i = 0; i &lt; urls.length; i++) {
          img[img.length] = new Image();
          img[img.length - 1].src = urls[i];
      }
  }
  
  window.onload = function() {
      var img = new Array(
          "http://desmond.imageshack.us/Himg391/scaled.php?server=391&amp;filename=countdown.gif&amp;res=medium",
          "http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif",
          "http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif",
          "http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif",
          "http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF"
      );
      preloadImages(img);
      initImages();
  }
  </code></pre>
  
  <p>With some added CSS:</p>
  
  <pre><code>.preload
      {
         visibility: hidden;
      }
  </code></pre>
  
  <p>It's basically <a href="https://stackoverflow.com/questions/5114828/multiple-image-fadein-onload-at-the-same-time">this</a> and <a href="http://w3mentor.com/learn/javascript-examples/images-and-animations/preloading-multiple-images-in-javascript/" rel="nofollow noreferrer">this script</a> combined.</p>
  
  <p>You can view a live example here: <a href="http://jsfiddle.net/AN9uB/" rel="nofollow noreferrer">http://jsfiddle.net/AN9uB/</a></p>
  
  <p>Some possible methods or potentially helpful posts:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/3191922/restart-an-animated-gif-from-javascript-without-reloading-the-image">Restart an animated GIF from JavaScript without reloading the image.</a></li>
  <li><a href="https://stackoverflow.com/questions/5826747/javascript-to-only-display-animated-gif-when-loaded">Javascript to only display animated gif when loaded.</a></li>
  </ul>
  
  <p>However from reading the comments on those links, I'm not entirely sure they're possible.</p>
  
  <p>The test gifs I'm using are just random images I found and a small forewarning, some of the images are fairly large since I needed to test a variety gifs ranging in size and duration. All of the gifs loop except for the first countdown image which only plays once.</p>
  
  <p>On some occasions the first countdown image doesn't play at all (it's stuck on 10) when viewing the page with Firefox 3.6.18, but otherwise the rest of the gifs all load and display at the same time.</p>
  
  <p>The main problem is that I cannot think of a way to make this work with Internet Explorer. I thought perhaps to preload the images and then refresh the page via javascript. It's an ugly solution, but I think it would work.</p>
  
  <p>Flash is the obvious tool to be doing this kind of thing in, but the friend who I'm making this for only uses gifs.</p>
  
  <p>Is there a more elegant solution that works across all major browsers? Also ideally, to only use Javascript, not JQuery.</p>
  
  <p>Thanks for any help.</p>