如何在javascript中克隆图像

Question

如何在javascript中克隆图像

Wil*_*jer 12 javascript clone copy image cross-browser

我正在尝试在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>

Run Code Online (Sandbox Code Playgroud)

解

在映像目录中添加了一个简单的.htaccess文件的服务器端缓存标头:
/img/.htaccess

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

Run Code Online (Sandbox Code Playgroud)

如果设置了缓存标头,则以上所有javascript方法都将使用加载的图像.

Answer 1

Koo*_*Inc 8

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

Run Code Online (Sandbox Code Playgroud)

这一切都非常复杂,所以它也应该在IE6中运行(我没有它,因此无法测试). 看到它在行动

此外,您可能想要检查IE6浏览器的缓存设置.我记得从IE <8的不太好的旧时代起,我有时会恢复设置缓存以"每次加载页面时刷新"(或者像那样).

归档时间：	14 年，7 月前
查看次数：	27264 次
最近记录：	13 年前