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

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

我尝试创建加载消息的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的clone，但没有成功。函数出错。

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

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

你可以克隆元素，是的。但是你也可以创建一个新的javascript，它有一个本地cloneNode方法，至少在IE7中是这样，这就是我目前所拥有的。我很确定它是跨浏览器的

这应该满足您的要求：

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

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