如何在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:

我正在尝试用javascript克隆一个图像，巴德没有加载一个新的。通常，新的浏览器会加载一个图像，有几种方法可以再次使用该图像。问题是当我在ie6中测试它时，图像会从服务器请求一个新的图像。有人知道如何在旧的浏览器中实现这一点吗?3不工作的方法:

<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

在图像的目录中添加了一个简单的.htaccess文件的服务器端缓存头:/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.

如果设置了cache-header，以上所有javascript方法都将使用已加载的图像。

2 个解决方案

#1

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

Afaik的默认浏览器行为是缓存图像。所以像这样的事情应该按照你想要的方式进行:

 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

这都是很好的sop，所以它也应该在IE6中运行(我没有它，所以不能测试它)。看到它在行动

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).

此外，您可能需要检查IE6浏览器的缓存设置。我记得，在IE<8的那段不太好的日子里，我有时会重新设置缓存以刷新“每次加载页面”(或类似的东西)。

#2

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,

javascript提供了这种构建。这里是修改了Danny Goodman的Javascript圣经第二版。498,500用于缓存/预加载图像，

<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);

#1