Image Preloading From CSS With jQuery

20 Jun

This is a jQuery plugin which enables you to preload images mentioned in CSS.

It is useful to prevent the flickering & loading period happens when an image is being loaded at rollover states, Ajax loaders, toggle effects & more.

The plugin can pull any image in the CSS independent from the folders they are placed in.

Tip:

Here is a version of this image preloading script ported to Prototype.

Requirements: jQuery
Compatibility: All Major Browsers
Website: http://www.filamentgroup.com/lab/update_automaticall...
Demo: http://www.filamentgroup.com/examples/preloadImages/...
Via: http://ajaxian.com/archives/preloading-images-with-j...

Tags: Css Javascript jQuery Prototype
Filed under: Browsing, Goodies, License Free

4 Responses for "Image Preloading From CSS With jQuery"

Vel June 21st, 2008 at 2:11 am
Here is another way to preload images just with css

#footer {
background: url(images/preloading1.jpg);
background: url(images/preloading2.jpg);
background: url(images/preloading3.jpg);
background: url(images/preloading4.jpg);
.
.
.
.
background: url(images/footer_bg.gif);
}
Just load as background all images that should be preloaded and last background is the necessary one.
That’s it!

wrd June 21st, 2008 at 9:36 am
@Vel,

That’s interesting. But I think it will fail in validation.

kip June 21st, 2008 at 3:39 pm
@wrd

It’s completely valid code according to the validator.
and its a good method Incase JS is turned off which is a large number.

Automatically Preload images - Precarga automática de imágenes desde la CSS y con jQuery - Desarrollo | pixelco.us blog June 24th, 2008 at 6:37 am
[...] Vía: WebResourcesDepot [...]

Image Preloading From CSS With jQuery

Tip:

Related Posts

4 Responses for "Image Preloading From CSS With jQuery"

Popular Posts