javascript - 在 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 对象中，以使用带有 $(window.loadingIcon).clone() 的克隆，但这不起作用(函数出错)。

Answer 1

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