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...
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
- 8 Comments
8 Responses for "Image Preloading From CSS With jQuery"
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!
@Vel,
That’s interesting. But I think it will fail in validation.
@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.
[...] Vía: WebResourcesDepot [...]
Or you can just put all the related images you may need into image sprites to reduce your HTTP requests
Sprites is the best option unless you have transparent PNGs for navigation where Background behaviours and fixes don’ work with background positioning. Your only option is then individual files
In case you need to preload images using javascript and later insert them into the DOM tree, I found this alternative method – preloading images with jQuery and javascript.
I know this thread is old, but just in case anyones looking – im trying to do similar but I want the images to be used as almost full screen background images once pre-loaded.
I’ve got the images loading with a ‘please wait’ spinner, and once loaded I can .prepend no problem and fade them in. But if I change the .prepend to a .css and set it as a background-image, then the preloading seems to make no difference. The browser fetches it again anyway.
Any ideas?