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

Question

这可能是一个非常简单的,但我找不到答案.

我有以下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对象中以使用clone $(window.loadingIcon).clone()但不起作用(函数出错).

Answer 1

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