how to load a dynamically inserted img first

Question

I am building a splash page for a website with jquery animations. My problem is: sometimes (before the page and images are cached by the browser) the images load in an order which detracts from the quality of the animation.

Ok, heres what I did: the container div has the following css: background:url(images/colorcity.png) if js is enabled I superimpose a greyscale <img> onto colorcity, whose opacity is animated to 0 for a nice "fade to color" effect. to do this I use: $("#container").prepend('<img src="images/greycity.png" class="grey" />')

What I have been attempting to do, is somehow get that prepended image to be the first thing to display on the page, as it will be 'hiding' other images used in the animation. Unfortunately all of my attempts have failed.

I assume that this is a common problem and likely is a repeat question, but I couldn't find an answer after an hour or two of looking. So, sorry if I'm a noob lol.

Thank you ahead of time for any help.

The page: http://roughgiraffed.com/barrandbarrbags/

Answer 1

Try including this at or near the top of your page:

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

That should force the image to load pretty early on. If it's still a problem do your animation in the load() callback rather that ready(), to ensure that all your images will be loaded up.

Very cool page, by the way (and it seems to work great in firefox).