Pre loading images with Asset.images

[Chad Meyers]

I want to pre load my larger images, so the site will "load faster"  You shouldn't need to ask why. . .

I am using this extremely simple code

window.addEvent('load', function() {

var preLoadImages = Asset.images([

'images/bgHome.jpg',

'images/topImg-honeymoons.jpg',

'images/services-rightSide.jpg',

'images/topImg-blog.jpg',

'images/topImg-contact.jpg',

'images/topImg-aboutMe.jpg',

'images/bgRealWeddings.jpg'

]);

});

I call it one EVERY page, that way if you land on the site not in the home/index page, the images still load ahead of time.

Is there a way to dress it up a bit, so that based on sessions, if the images are already cached it will skip them. or would that be unnecessary?  I suppose if the images are cached, the browser just loads them, and there is no call to the server etc.

Thoughts, maybe an example of a good preload script, mootools or otherwise.

NOTE: the script is called on load, so AFTER the page is up.  Pre loading OTHER page images.

[Sanford Whiteman]

> Is there a way to dress it up a bit, so that based on sessions, if the
> images are already cached it will skip them. or would that be unnecessary?

In theory, it would be unnecessary; in practice, it is a good idea to
minimize references to remote assets so that browsers' "heuristic"
cachebusting measures are less likely to kick in. So you could just
check for a session cookie before Asset.images(), n'eh?

That said, if you're expecting to manage caching solely at the client
side, you're doing it wrong. What you want is to serve these images
with far-future Expires: headers -- if the images change, then your
markup/CSS should fetch them at a new path (a new query string works
most of the time, but a new path is even better to deal with old
proxies that think query string == no-cache). My advice is to have a
cacheme.example.com subdomain from which *everything* expires in the
distant future; no dynamic URIs ever come from that domain.

Steve Souders' blog is the primary resource for this stuff.

-- Sandy