How to load dynamically inserted img

Question

I am creating a popup for a site with jquery animation. My problem: sometimes (before the page and images are cached by the browser) loading the images in an order that reduces the quality of the animation.

Ok, here's what I did: the div container has the following css: background:url(images/colorcity.png)if js is turned on, I apply a grayscale <img>to colorcity, whose opacity is animated to 0 for a nice “fade color” effect. for this i use:$("#container").prepend('<img src="images/greycity.png" class="grey" />')

What I'm trying to do somehow makes this preview image the first thing to display on the page, as it will “hide” other images used in the animation. Unfortunately, all my attempts have failed.

I guess this is a common problem, and probably this is a recurring question, but I could not find the answer in an hour or two. So sorry if I noob lol.

Thank you for your help.

Page: http://roughgiraffed.com/barrandbarrbags/

Answer 1

Try to include this at or near the top of the page:

<img src="images/greycity.png" style="display: none;" />

This should make the image load quite early. If you still have a problem with the animation in the callback load(), not with ready(), to make sure all your images are uploaded.

A very cool page, by the way (and it works fine in firefox).