使用javascript在网页中添加重复图像

我想使用javascript将一些图像附加到网页中的

div

。图像的每个新实例都将位于一个循环中，该循环包括以下内容

pic=new Image()
pic.src="./images/xyz.jpg"
document.getElementById(div1).appendChild(pic)

这是可行的，但因为随机选择了大量重复的图像，我认为每次重复都会从我已经拥有的服务器获取一个图像，我想知道如何避免这种开销

网络上有各种克隆对象的技术，所以你可能会认为

appendChild(pic1)
pic2=clone(pic1)
appendChild(pic2)

这样就可以了，但克隆似乎包括

.src

，因此不会保存。在任何情况下，只有一个图像出现

---

有什么想法吗

实际上，如果图片已下载一次，浏览器将不会下载另一份。因此，您可以添加任意数量的相同图像。

重新加载这两个页面时，我没有注意到渲染时间有任何差异（使用Google Chome）

我的猜测是，您使用的浏览器具有缓慢的JavaScript引擎和/或DOM实现。另外，

appendChild（）

也可能很慢。将innerHTML创建为一个大字符串，并一次性分配它。或者，使用CSS显示图像（使用

背景图像和固定大小），只需创建空div。这应该比创建数百个图像对象更快

如果您需要更快，请尝试。
我们可以在线查看示例吗？+1只要URL相同，浏览器将使用其缓存。@Aaron Digulla-实际上不是“缓存”，因为当您重新访问以前访问过的页面时，通常会引用缓存。在本例中，图像已经存在于内存中。谢谢@Nalum和@arnorhs，但我不完全相信-显示了我正在尝试的内容（这只是客户评论的虚拟页面，因此请不要担心脚本以外的任何细节）。具有相同的脚本容量，但仅添加文本。速度差异非常明显。我原本希望浏览器能够缓存图片，但我认为，由于javascript将每个项目视为一个新的图像对象，因此每次都会返回到服务器。我同意@SteveKimpton，我认为是的，浏览器将执行新的请求，这只取决于服务器是否响应304未修改或再次发送整个文件。好的，谢谢-我将接受您对单个字符串的建议。你说得对，在Chrome中几乎没有什么区别。在FF3.6中，使用CSS背景图像非常重要。+1，因为这可能是避免多次下载文件的唯一方法。一个小问题@AaronDigulla-示例：1）我下载了一个图像，即新图像（“加载”事件litener）。服务器HTTP响应头显示：嘿，浏览器，缓存那个。2） 我想要图像对象的另一个实例（不使用canvas toDataUrl等）。这会导致新的服务器请求吗？我认为它会和服务器将响应304未修改或将再次发送文件。对吗？（arnorhs的回答不正确）