title: Load and play a gif with javascript onclick event
body: <p>On my website I have three images <code>1.png, 2.png and 3.png</code>. When I click on <code>1.png</code>, I want the animated gif <code>1a.gif</code> to be loaded and shown/updated in the img tag located in <code>&lt;div id="container"&gt;</code>. When I click on <code>2.png</code>, <code>2a.gif</code> should be displayed (while <code>1a.gif</code> vanishes) and so on... This is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div&gt;
   &lt;img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" /&gt; 
   &lt;img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" /&gt;
   &lt;img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" /&gt;
  &lt;/div&gt;
  
  &lt;div id="container"&gt;
  &lt;img id="img" src="1a.gif" /&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image. </p>
  
  <p>As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:</p>
  
  <pre><code>#container {background:url('loading.png') no-repeat; }
  </code></pre>
  
  <p>In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).</p>
  
  <p>Showing it right before loading the gif did not help as well:</p>
  
  <pre><code>&lt;img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
  document.getElementById('img').src = '1a.gif'" /&gt;
  </code></pre>