Cloning in-memory image in JavaScript /jQuery

Question

This is probably a really simple one but I couldn't find the answer.

I have the following JavaScript/jQuery code where I am trying to create loading messages:

// 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
});

I wanted to cache the image on load so I'm not requesting it each time I want a loading message. Am I actually acheiving this with the above code?

The idea is that there's a lot of dynamic content on the page, and at any time I might have several different loading icons active.

I add the loading icon wherever with:

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

This doesn't actually work though, when I try to show a new loading icon, it just moves the previous one, so I can't have more than one on the page at a time.

I'm assuming I need to clone the element?

I tried to wrap the element in a jQuery object to use clone with $(window.loadingIcon).clone() but that didn't work (the function errored).

bobince · Accepted Answer · 2010-07-29 13:06:38Z

8

You could clone the element, yes. But you can just as well create a new <img> element. If the image src has already been loaded by the browser, the image data will be cached and no further network-load will occur. You don't need to cache the element itself to cache the resource it's pointed at.

answered Jul 29, 2010 at 13:06

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

DMA57361 · Accepted Answer · 2010-07-29 12:43:38Z

1

Try creating the image as a jQuery object:

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

And then you should be able to clone it when you need to use it:

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

answered Jul 29, 2010 at 12:43

DMA57361

3,7503 gold badges31 silver badges36 bronze badges

Comments

lincolnk · Accepted Answer · 2010-07-29 13:34:32Z

1

javascript has a native cloneNode method, at least in IE7, which is all I have at the moment. I'm pretty sure it's cross browser.

this should do what you want:

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

answered Jul 29, 2010 at 13:34

lincolnk

11.2k4 gold badges43 silver badges63 bronze badges

Collectives™ on Stack Overflow

Cloning in-memory image in JavaScript /jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related