title: Asynchronous playback of several <img> tags with same animated GIF
body: <p>I have a lot of <code>&lt;img&gt;</code> tags on one HTML page some of whom share the same animated GIF file. The <code>src</code> URL is set dynamically by JavaScript but with my code the same characters are either played all again or following characters are immediately displayed with the last frame.</p>
  
  <p><strong>The idea:</strong> This is for an art project. After some text has been entered the characters are displayed in a special font and some transition is done <em>character per character</em> (one after another) which I can only realize by using animated GIFs. The text is split into single characters and <code>&lt;img&gt;</code> tags are created like this:</p>
  
  <pre><code>&lt;!-- delivered HTML at page load --&gt;
  &lt;img src="initial/f.png"&gt; &lt;!-- I used to PNG here to outline --&gt;
  &lt;img src="initial/o.png"&gt; &lt;!-- the animation is NOT set a first --&gt;
  &lt;img src="initial/o.png"&gt;
  </code></pre>
  
  <p>When the animation starts the first <code>&lt;img&gt;</code>'s URL is set to <code>transition/f.gif</code>. Only after it has finished playing (determined by time) the 2nd image is set etc.</p>
  
  <pre><code>&lt;!-- while 2nd animation is running --&gt;
  &lt;img src="transition/f.gif"&gt; &lt;!-- already finished, displays last frame --&gt;
  &lt;img src="transition/o.gif"&gt; &lt;!-- being animated right now --&gt;
  &lt;img src="transition/o.png"&gt; &lt;!-- will be reset to o.gif in next step --&gt;
  </code></pre>
  
  <p><strong>The problem I can't solve:</strong> After <code>o.gif</code> from the example has been played the animation of the next O doesn't work correctly.</p>
  
  <p>I tried defining a class for every character and assigning the image as <code>background-image</code>. Once any occurrence of a character had played any following occurrences of the same letter displayed the last frame (end state) of that GIF immediately when displayed.</p>
  
  <p>I also tried setting the <code>src</code> attribute directly with JavaScript but when the 2nd letter O is set like this the first letter O's animation restarts synchronously. But it shall stay at the last frame.</p>
  
  <p>As the HTML page should also work on the local filesystem I think arguments like <code>o.gif?random=argument</code> for bypassing cache mechanism won't work or won't have any effect (maybe on some computers, testing on my own won't falsify).</p>