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.

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/

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.

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.

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.

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.

Thanks for posting this, I was just thinking about this problem on a website I'm building. Very useful, though I also wish JS could do handle it.

Am I missing something? You just load a placeholder image and then after page load (or hitting a certain document scroll position or …) you alter the img src to point at the desired image. The main trick is avoiding making this jerky, which might really be more of a case of a single placeholder and then generating images on the fly as appropriate for the form-factor.

For that particular use case, check out http://tinysrc.net/

it's possible but i don't know how to do it. look at youtube result pages. it only loads the images in the visible browser screen and as you scroll down it loads the remaining.

You're thinking of lazy load. He's talking about something different. If you were wondering how to do that, though, here is a link http://www.appelsiini.net/projects/lazyload

This would be perfect, but if you read the notice on the top of the page, it no longer works with current browsers.

Oops, had it in my list of useful links note in evernote. Haven't looked lately. There are others out there that work.

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)

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.

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

But it still can be made with image objects.

Any know of a similar script for preloading inline images?