title: How can i clone an image in javascript
body: <p><br>
  I'm  trying to clone an image in javascript, bud without loading a new one.<br>
  Normally new browsers will load an image once and there are several ways to use that image again.
  The problem is that when I test it in IE 6 the image will request a new image from the server.
  <br>
  Anyone how has some info on how to do this in older browsers?<br>
  <br>
  3 methods that not work: <br></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My Image Cloning&lt;/title&gt;
      &lt;script type="text/javascript"&gt;
          sourceImage = new Image();
          sourceImage.src = "myImage.png";
  
          function cloneImageA () {
              imageA = new Image();
              imageA.src = sourceImage.src;
              document.getElementById("content").appendChild(imageA);
          }
  
          function cloneImageB () {
              imageB =  sourceImage.cloneNode(true);
              document.getElementById("content").appendChild(imageB);
          }
  
          function cloneImageC()
          {
              var HTML = '&lt;img src="' + sourceImage.src + '" alt="" /&gt;';
              document.getElementById("content").innerHTML += HTML;
          }
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="controle"&gt;
          &lt;button onclick="cloneImageA();"&gt;Clone method A&lt;/button&gt;
          &lt;button onclick="cloneImageB();"&gt;Clone method B&lt;/button&gt;
          &lt;button onclick="cloneImageC();"&gt;Clone method C&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
          Images:&lt;br&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <h2>Solution</h2>
  
  <p>Added cache-headers server-side with a simple .htaccess file in the directory of the image(s):<br>
  /img/.htaccess</p>
  
  <pre><code>Header unset Pragma
  Header set Cache-Control "public, max-age=3600, must-revalidate"
  </code></pre>
  
  <p><strong>All of the above javascript method's will use the image loaded if the cache-headers are set.</strong></p>