如何在JavaScript中克隆图像？

我试图克隆一个图像在 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方法将使用加载的映像.

解决方法

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 8的时候开始,我有时还是要把缓存设置为刷新“每次你加载页面”(或者类似的一样).

如何在JavaScript中克隆图像？

解决方法

相关推荐