Клонирование изображения в памяти в 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

Попробуйте создать образ как объект JQuery:

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

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

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

Answer 3

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

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

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