javascript - 在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()进行克隆，但这不起作用（函数出错）。

最佳答案

您可以克隆元素，是的。但是您也可以创建一个新的<img>元素。如果浏览器已经加载了图像src，则图像数据将被缓存，并且不会再发生网络负载。您无需缓存元素本身即可缓存其指向的资源。