Cost: Free, links back
Found Via: www.filamentgroup.com
Today, I came across a great jQuery plugin that will preload your images. This file now has a permanent spot in my “resources” folder. The plugin essentially scans your CSS files and preloads all of the images within it.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great plugin. Just in time for me to add it to a new site I’m designing
Great plugin and code but it downloads images from CSS file. I needed to preload images using jQuery to insert them into the DOM. This article describes it very nicely.
I hope it will help some who came here using google :)
Thanks for this plugin, I will probably use it in my next project.
That’s crazy… I googled this YESTERDAY and now you guys have a post on it. Bookmarked.
Amazing!
Really Cool effect.
Thanx for sharing
Great Plugin
That’s great – thank you. Say – care to share what else is in your ‘resources’ folder?! I’m always interested to learn peoples basic file structure when setting up a new project … !
I’ve followed the steps to install it and I’m familiar with jQuery but I can’t see it working on my page.
I have a header that has a .jpg that’s about 11kb ( it’s assigned using ‘background-image’ in the css and is repeated across the x axis ) in size but I still see the ‘flickering’ as it’s being loaded.
Should the plug-in show the entire repeated section of image(s) in one go, once preloaded?
Even navigating away from the page and coming back to it makes no difference.
Any help would be nice. :)
For some reason I thought that css referenced images were automatically preloaded when the css file gets loaded into the browser.
Thought this was one of the factors in using css rollovers instead of javascript rollovers.
Wonder where i got that from. :S
ahh i remember now.
css rollovers have both images loaded anyway with the top image (off state) placed over the background image (on state) using css.
so its a kind of fake preloading.
so not the same thing :)
@Ben Clear the cache on your browser and then use Firefox’s ‘Net’ menu to see if the image has been preloaded.
I use the following plugin for my preloading:
http://flesler.blogspot.com/2008/01/jquerypreload.html
I have posted a tutorial to preload js scripts and css with simple jqery and any plugins or 3rd lirabries. It is the same concepto behind the Gmail preloader:
http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/
Very nice, just what I’ve been looking for infact
cool i like it
this is wonderful tutorial i will put acopy of this lesson on
my site here
http://www.as7ap4you.com
omg GREAT! im searching for this!.
olny in nettuts!.
jquery is great d00dz
jQuery Formation http://mattnull.com/formation
It’s the very thing i want to catch. Thanks!
Does anyone know how they got that loading page done?? cant seem to figure it out..
Thanks in advance
Which better, Preload image using javascript or CSS?