Update: A New & Improved jQuery Script to Automatically Preload images from CSS
10/31/08 Update: Many updates to performance, error handling, and
browser bugs. Thanks Trixta!
7/24/08 Update: Fixed support for Opera and @import CSS (thanks
http://marcarea.com/).
6/21/08 Update: This script is now updated with optional settings
for load status, including a percentage bar! We also included a bug fix
for IE when loading absolute image paths (Thanks Sam Pohlenz!). Details
are below.
When we first launched the lab, we released a jQuery plugin that automatically preloads all images referenced in CSS files. We’ve found the script to be incredibly helpful in developing snappy applications where images are always ready when we need them. This post describes a significant update to the script which will make it even easier to integrate in existing projects.
The concept behind this script
If you’re interested in reading about how and why we developed this script, please read our original article. Keep in mind that this update provides a new version of the code which is highly recommended over the first version.
New version improvements
Among other small improvements, this release allows preloading images from any directory specified in the CSS. Also offers load status updates for text and image-based load bars.
Load images from anywhere; no arguments!
The first version of the script preloaded images from a single directory. Unfortunately, this limitation meant the script would not work well with web applications using images located in several directories or even other web sites entirely. This updated version loads images relative to their stylesheet’s url, allowing them to load no matter where they are located on the web. The new code is detailed below:
The source code
The source code for this plugin is available in a git repository, jQuery-Preload-CSS-Images.
How do I use it?
To use this plugin, be sure you’ve attached the jQuery javascript
library and
preloadCssImages.jQuery_v5.js to your page, and call
$.preloadCssImages(); when the DOM is ready. Like this:
$(document).ready(function(){
$.preloadCssImages();
});
This will parse though all of your attached CSS files and preload any images it finds referenced in them.
A quick demo
The example below uses our script to parse through a sample stylesheet which we’ve linked to the page. The sample stylesheet has background images specified for elements that don’t actually exist on the page, so the images specified are not currently loaded. Clicking the button below will load them into the DOM. For example purposes, we’ll write the loaded images into the page as well. The optional load status elements are shown upon load.
For a simplified demo page that doesn’t use a visual preloader, view this page: http://www.filamentgroup.com/examples/preloadImages/index_v5b.html
Additional options
Displaying Load Progress
You can optionally pass element selectors to the plugin which will
receive updates on the load status. These settings are specified as
statusTextEl and statusBarEl. The values must be jQuery selector
strings, for example:
$.preloadCssImages({statusTextEl: '#textStatus', statusBarEl: '#status'});.
To make a preload bar, cut a background image to the same width as your
status bar element and assign it to the background of your element in
CSS. Be sure to set its background-repeat to ‘no-repeat’. The script
will handle the positioning.
Number of Simultaneous Requests Allowed
This feature was added by Trixta. The option simultaneousCacheLoading
allows you to specify the number of simultaneous images to request at a
time. It defaults to 2. If you plan to run this plugin while other
assets are loading, you may want to set this option to 1, for browsers
which can only handle 2 HTTP requests at a time.
Download jQuery-Preload-CSS-Images
This script is a jQuery plugin, meaning is is dependent on the incredible jQuery javascript library. If you feel particularly adventurous, this script could be easily ported to another library or written in plain old JavaScript as well. Feel free to grab the script and try it for yourself. We’re always looking for ways to improve our scripts, so if you think you can help on a particular issue, please submit a pull request and we’ll review it as soon as possible.
