Question

情况：我有一个很小的http服务器，在任何给定时间只能处理4个连接。打开网页时，我的Web浏览器异步发送每个图像资源的获取请求（尝试同时打开4个以上的连接）。这会导致一些不良行为。

初始解决方案：我写了一个JS函数，它按顺序加载图像并将它们存储在字典中

var loadedImages = {};

像这样：

 var img = new Image();
        img.src = <img_location>; 
        loadedImages[<img_name>] = img;

加载完所有图像后，我尝试将它们放在DOM中的不同位置。重要的是我需要在多个地方放置相同的图片。我是这样做的：

//For all the elements that need to have the same image DO:
var img = loadedImages["<img_name>"];
        $(this).html(img);

问题：发生的情况是，只要代码将图像放入SECOND元素，图像就会从FIRST元素中删除。当图像放入THIRD元素时，它将从SECOND元素中删除。所以会发生的事情是，基本上只有最后一个元素包含图像，而所有其他元素都是空的。

问题：如何将我的javascript字典（或任何其他javascript对象）中的相同图像放在多个DOM元素上？

修改：使用类似

的内容时

//For all the elements that need to have the same image DO:
var img = loadedImages["<img_name>"];
        $(this).html($(img).clone());

根据 Tamil Vendhan 和 Atif Mohammed Ameenuddin 的提议，图像被放置在所有元素上，这没关系，但是浏览器每次都从服务器请求图像时间到了那行代码。所以这不是一个好的解决方案。当我使用“cloneNode（）”

时也是如此

Answer 1

使用 jQuery.clone ：

$(this).html($(img).clone());

更新

是的，浏览器会提出请求。但如果已加载，它将使用缓存的图像。检查调试器的网络面板以确认这一点。您会在(from cache)列下看到Size。

Answer 2

尝试在jQuery中使用clone方法

$(this).html($(img).clone());