Javascript 如何在javascript中克隆图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5694986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i clone an image in javascript
提问by Wilco Waaijer
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 中克隆图像，但没有加载新图像。
通常新的浏览器会加载一次图像，并且有多种方法可以再次使用该图像。问题是当我在 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>
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.
如果设置了缓存头，上述所有 javascript 方法都将使用加载的图像。
采纳答案by KooiInc
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
这一切都很糟糕，所以它也应该在 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 的时候不太好，有时我会恢复设置缓存以刷新“每次加载页面时”（或类似的内容）。
回答by Jim Michaels
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 Bible 2nd Ed p.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);
