Update: A New & Improved jQuery Script to Automatically Preload images from CSS

Posted by Scott on 06/04/2008

Topics:

css

javascript

jQuery

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 libraryand 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 stylesheetwhich 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.

Demo page

For a simplified demo page that doesn't use a visual preloader, view this page:http://www.filamentgroup.com/examples/preloadImages/index_v5b.php

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 statusTextEland 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 simultaneousCacheLoadingallows 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 incrediblejQuery 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.