javascript - 将 JavascriptObject 中的一张图像放置到多个位置

Question

情况:我有一个小型 http 服务器，在任何给定时间只能处理 4 个连接。打开网页时，我的网络浏览器会异步发送每个图像资源的 get 请求(尝试同时打开 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);

问题:发生的情况是，一旦代码将图像放入第二个元素中，图像就会从第一个元素中删除。当图像放入第三个元素时，它将从第二个元素中删除。因此，基本上只有最后一个元素包含图像，而其他所有元素都是空的。

问题:如何将 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

尝试使用clone jQuery 中的方法

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