preload an animated gif

Question

I have a feature where a user can click a video thumbnail and my PHP script will go grab the video.

I have a div which is display: none; containing the flash video player code and its background image is the animated gif (a loading spinner) in the CSS. I use the jQuery show method to make it appear when the user clicks it.

But when the div is clicked the loading image needs to be fetched as well. Since the video is also being fetched at the same time, the loading image rarely shows up at all.

How can I preload this image without making it part of another image using the negative margin trick???

Answer 1

Put this javascript somewhere in the page so that it executes on load:

var image = new Image();
image.src = 'path/to/spinner.gif';