在 JavaScript / jQuery 中克隆内存中的图像答案

【问题标题】：Cloning in-memory image in JavaScript /jQuery在 JavaScript / jQuery 中克隆内存中的图像
【发布时间】：2011-03-22 16:50:12
【问题描述】：

这可能是一个非常简单的问题，但我找不到答案。

我有以下 JavaScript/jQuery 代码，我试图在其中创建加载消息：

// preload an image to use for dynamic loading icon whenever requested
$(document).ready(function() {
    var loadingIcon = document.createElement('img');
    loadingIcon.src = '../images/ajax-loader.gif';
    window.loadingIcon = loadingIcon; // chache in global var
});

我想在加载时缓存图像，所以我不会在每次需要加载消息时都请求它。我真的用上面的代码实现了这个吗？

这个想法是页面上有很多动态内容，并且在任何时候我都可能有几个不同的加载图标处于活动状态。

我在任何地方添加加载图标：

$('#myElem').appendChild(window.loadingIcon);

但这实际上不起作用，当我尝试显示一个新的加载图标时，它只会移动前一个图标，因此我一次不能在页面上显示多个。

我假设我需要克隆元素？

我尝试将元素包装在 jQuery 对象中以使用带有 $(window.loadingIcon).clone() 的克隆，但这不起作用（函数出错）。

【问题讨论】：

标签： javascript jquery dom clone append

【解决方案1】：

你可以克隆元素，是的。但是您也可以创建一个新的<img> 元素。如果图像 src 已经被浏览器加载，图像数据将被缓存并且不会发生进一步的网络加载。你不需要缓存元素本身来缓存它所指向的资源。

【讨论】：

【解决方案2】：

尝试将图像创建为 jQuery 对象：

var $loadingIcon = $('<img src="../images/ajax-loader.gif" />');

然后你应该可以在需要使用时克隆它：

$('#myElem').append( $loadingIcon.clone() );

【讨论】：

【解决方案3】：

javascript 有一个原生的cloneNode 方法，至少在 IE7 中，这是我目前所拥有的。我很确定它是跨浏览器。

这应该做你想做的：

$('#myElem').appendChild(window.loadingIcon.cloneNode());

【讨论】：