Question

I am trying to clone an item with jQuery and then animate it.
The original item has an image in it which is already loaded and shown prior to the cloning.
However, in the cloned item, the image only shows about half way through the animation.

Here is the html of the item to clone:

<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 the jQuery I’m using to clone it:

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 occurs when cloning elements with images in? Is there something wrong with what I’m doing? How can I fix this?

Answer 1

Verify that the headers for the image allow the browser to cache it. (Thanks Jonas H)

(The images were being served from a PHP file that didn’t cache them, therefore they were reloaded when cloned.)