JQuery image preload animation plugin for web pages?

JavaScript
1

Hi all,

I’m trying to find a JQuery plugin that will:

a) preload all img’s and background’s on a given page
b) display an animated gif in the center of the original’s img’s or background’s container
c) fade out showing each image once it’s downloaded
d) as a consequence of (a) allow the page to render (show) quicker even if (depending on server speed, connection speed and user computer speed) the remaining images are still in a ‘load state’.
e) is based on JQuery so not to increase page’s footprint via adding Mootools, Prototype, YUI or the like (unless the additional 100KB or so is so worth it).

I’ve scouted Google and there a few out there but amazingly none seem to focus on doing this for a web page’s image’s but rather seem to focus on galleries/lightbox windows and so forth.

Thanks in advance,

2

Well about 300 Google results pages later and probably about half of that in checked links it seems all jquery/javascript preloader scripts are designed to first manually type in the image src’s into an array (i.e. image-src = {‘images/image.png’, images/image2.png’} etc.}.

The above is fine for the odd page and/or images but not a full website (with multiple pages).

Anyone here know how difficult it would be to scan inside a div (say the main page’s container, or perhaps even within <body>) for img and background: tags and then read in their src’s to preload their images? This would automatically fill the array.

Adding an animation (aka ajax loader type GIF) where the images normally exist in the page until they’re loaded would just be the iceing on the cake (topped off with a nice fadeOut once ready).