Cloning an element with an image, the image takes time to appear

Question

I am trying to clone an element with jQuery and then animate it. The source element has an image that has already been uploaded and shown before cloning. However, in the cloned element, the image shows only half of the animation path.

Here is the html of the clone element:

<div class='item'> <div class='picture'><img src='img/picture1.jpg'></div> <h3>Item</h3> <p class='price'>$25</p> <div class='desc'>Image description...</div> </div> 

And jQuery which I use for cloning:

 itemObject = $(".item"); // Code has proper selector to choose appropriate item newItemObject = itemObject.clone() // Overlay new object over original object newItemObject.appendTo('#main').css({ 'position': 'absolute', 'top': itemObject.offset().top, 'left': itemObject.offset().left }); // Do animation on newItemObject... 

Is this something that always happens when cloning elements with images? Is there something wrong with what I'm doing? How can i fix this?

Answer 1

Make sure the headers for the image allow the browser to cache it. (Thanks to Jonas H )

(Images came from a PHP file that did not cache them, so they were reloaded during cloning.)