Клонирование изображения в памяти в 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-изображение уже загружено браузером, данные изображения будут кэшированы, и дальнейшая загрузка сети не произойдет. Вам не нужно кэшировать сам элемент для кэширования ресурса, на который он указывает.

Answer 2

javascript имеет собственный метод cloneNode, по крайней мере, в IE7, и это все, что у меня есть на данный момент. Я уверен, что это кросс-браузер.

это должно делать то, что вы хотите:

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

Answer 3

Попробуйте создать изображение как объект jQuery:

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

И тогда вы сможете клонировать его, когда вам нужно его использовать:

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