0

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

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

var 加载图像 = {};

像这样：

 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 元素中移除。当图像被放入第三个元素时，它会从第二个元素中删除。所以发生的情况是，基本上只有最后一个元素包含图像，而其他所有元素都是空的。

问题：如何将我的 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（）”时也是如此

4

2 回答 2

1

使用jQuery.clone：

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

更新：

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

于 2013-07-04T11:27:24.190 回答
1

尝试在 jQuery 中使用clone方法

$(this).html($(img).clone());
于 2013-07-04T11:27:38.423 回答