How can i clone an image in javascript

I'm trying to clone an image in javascript, bud without loading a new one.
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.
Anyone how has some info on how to do this in older browsers?

3 methods that not work:

<html>
<head>
    <title>My Image Cloning</title>
    <script type="text/javascript">
        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 = '<img src="' + sourceImage.src + '" alt="" />';
            document.getElementById("content").innerHTML += HTML;
        }
    </script>
</head>
<body>
    <div id="controle">
        <button onclick="cloneImageA();">Clone method A</button>
        <button onclick="cloneImageB();">Clone method B</button>
        <button onclick="cloneImageC();">Clone method C</button>
    </div>
    <div id="content">
        Images:<br>
    </div>
</body>

Solution

Added cache-headers server-side with a simple .htaccess file in the directory of the image(s):
/img/.htaccess

Header unset Pragma
Header set Cache-Control "public, max-age=3600, must-revalidate"

All of the above javascript method's will use the image loaded if the cache-headers are set.

Afaik the default browser behavior is to cache images. So something like this should work the way you want:

 var sourceImage = document.createElement('img'),
     imgContainer = document.getElementById("content");
 sourceImage.src = "[some img url]";
 imgContainer.appendChild(sourceImage);

 function cloneImg(){
     imgContainer.appendChild(sourceImage.cloneNode(true));
 }

It's all pretty sop, so it should run in IE6 too (I don't have it, so can't test that). See it in action

Furthermore, you may want to check the cache setting of your IE6 browser. I remember from the not so good old days with IE<8 that I sometimes reverted to setting the cache to refresh "every time you load the page" (or someting like that).

javascript has provisions for this build in. here is code modified from Danny Goodman's Javascript Bible 2nd Ed p.498,500 for cacheing/preloading an image,

<img src='/images/someotherimage1.png' id='img1'>
<img src='/images/someotherimage2.png' id='img2'>
<img src='/images/someotherimage3.png' id='img3'>
<script type="text/javascript">
function assignall(numImages, x, y) {
    var img = new Image(x, y);
    img.src = '/images/someimage.png';
    var x;
    for (x=1; x <= numImages; x++) {
        document.getElementById('img'+x).src = img.src;
    }
}

assignall(3); //do it.
</script>

you can always use an array if you have a number of images to work with.

var img = new Array();
function initallimages(numImages, x, y) {
    var x;
    for (x=1; x <= numImages; x++) {
        img['img' + x] = new Image(x,y);
        img['img' + x].src = '/images/someimage.png';
    }
 }
 function assignallimages(numImages) {
    var x;
    for (x=1; x <= numImages; x++) {
        document.getElementById('img' + x).src = img['img'+x]['img' + x].src;
    }
}

initallimages(3, 320, 240);
assignallimages(3);

来源：https://stackoverflow.com/questions/5694986/how-can-i-clone-an-image-in-javascript

标签

javascript

image

cross-browser

copy

clone