Question

我试图在javascript中克隆一个图像，不加载新的图像通常，新浏览器会加载一次图像，并且有多种方法可以再次使用该图像。问题是当我在IE 6中测试时，图像将从服务器请求新图像。
任何人如何在旧浏览器中有关于如何执行此操作的信息？
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>

解决方案

在服务器端添加了一个简单的.htaccess文件，位于图像目录中：
/img/.htaccess

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

如果设置了缓存标题，以上所有javascript方法都将使用加载的图片。

Answer 1

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

这一切都很不错，所以它也应该在IE6中运行（我没有它，所以无法测试）。 See it in action

此外，您可能需要检查IE6浏览器的缓存设置。我记得从IE＆lt; 8以来不太好的旧时代，我有时会在每次加载页面时恢复设置缓存以刷新“（或者像那样）。

Answer 2

javascript为此内置提供了条款。这里是代码修改自Danny Goodman的Javascript Bible第二版第449,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>

如果你有许多图像可以使用，你总是可以使用数组。

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

如何在javascript中克隆图像

解决方案

2 个答案: