
JQuery Script to Automatically Preload images - DanielRibeiro
http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
======
qeorge
I've used this on at least 10 production sites, for years. It works _great_.

The Filament Group blog is filled with gems like this, highly recommended
reading. FWIW, Filament Group contribute heavily to jqUI, and developed
Themeroller.

------
JoelSutherland
I wish it were possible to delay the loading of images using JS. That would
allow them to be swapped for images that were the appropriate resolution for
the device looking at them.

This is this big issue with responsive web design. There is a solution, but it
requires both modifying HTML and additional HTTP requests:

<http://filamentgroup.com/examples/responsive-images/>

~~~
Groxx
Why wouldn't it be possible? Just make placeholder div tags with fixed and
accurate size (unless you don't mind re-flowing as they load - I dislike it),
then JS the device type and create img tags on the fly.

~~~
JoelSutherland
That is effectively the same (but not quite as nice) as the solution I linked
to.

The problem is that I can't ask Joe Client to create placeholder divs. I want
to handle it magically for him.

~~~
Groxx
But you can ask Joe Client to make everything as they like, and then post-
process it when it's saved, shrinking images and replacing them with
placeholders automatically.

edit: looked at page code.

Isn't that nearly the same as placeholders though? You're asking them to
suffix their images, _and_ add a non-standard attribute to every one they want
to load dynamically. That burden, and the image resizing, is all done by Joe
Client via that framework, under identical assumptions. That's not magical,
and it's functionally identical to what I proposed, but it causes extra
requests.

~~~
JoelSutherland
It is nearly the same as a placeholder. The advantage is that even without JS,
it still functions and has meaning. This is a big advantage.

Just as your placeholder could happen in post processing, so could the suffix
and attribute be added.

Having looked into this more there seem to be only three decent approaches. 1)
Send the small image first potentially causing extra HTTP requests. 2) Require
JS to make a placeholder swap. 3) Cap the image dimensions server side based
on a User Agent/Resolution table.

Option 3 is terrible to implement but avoids the downsides the others have.

------
teye
Wouldn't it be better to put this in _load_ instead of _ready_ so it won't
slow down the loading of visible images or other resources?

( _Ready_ = DOM is ready, _load_ = page elements are loaded)

------
mrkurt
The article's not loading for me, but I can't figure out why you'd bother with
jQuery to preload images instead of pure Javascript and the image object...

\--edit--

Oh, it just loaded. It looks like it's meant to preload CSS images, which
makes more sense.

~~~
bherms
Yep, exactly. It crawls the CSS for images and preloads them with jQuery.

------
NHQ
Any know of a similar script for preloading inline images?

~~~
juddlyon
[http://engineeredweb.com/blog/09/12/preloading-images-
jquery...](http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-
javascript)

