JQuery Script to Automatically Preload images

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

by DanielRibeiro • 16 years ago

40 19 16 years ago

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/

Groxx2• 16 years ago

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.

JoelSutherland4• 16 years ago

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.

jetz• 16 years ago

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.

bherms3• 16 years ago

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

SkyMarshal• 16 years ago

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.

acdha• 16 years ago

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.

nixme• 16 years ago

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

mrkurt• 16 years ago

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.

bherms3• 16 years ago

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

mhitza• 16 years ago

But it still can be made with image objects.

qeorge• 16 years ago

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.

teye• 16 years ago

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)

NHQ• 16 years ago

Any know of a similar script for preloading inline images?

juddlyon• 16 years ago

http://engineeredweb.com/blog/09/12/preloading-images-jquery...

JQuery Script to Automatically Preload images

Related Stories