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

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 preloadCssImages.jQuery_v4.js

/**
 * --------------------------------------------------------------------
 * jQuery-Plugin "preloadCssImages"
 * by Scott Jehl, scott@filamentgroup.com
 * http://www.filamentgroup.com
 * reference article: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/
 * demo page: http://www.filamentgroup.com/examples/preloadImages/index_v4.php
 * 
 * Copyright (c) 2008 Filament Group, Inc
 * Dual licensed under the MIT (filamentgroup.com/examples/mit-license.txt) and GPL (filamentgroup.com/examples/gpl-license.txt) licenses.
 *
 * Version: 4.0, 07.24.2008
 * Changelog:
 * 	02.20.2008 initial Version 1.0
 *    06.04.2008 Version 2.0 : removed need for any passed arguments. Images load from any and all directories.
 *    06.21.2008 Version 3.0 : Added options for loading status. Fixed IE abs image path bug (thanks Sam Pohlenz).
 *    07.24.2008 Version 4.0 : Added support for @imported CSS (credit: http://marcarea.com/). Fixed support in Opera as well.
 * --------------------------------------------------------------------
 */
jQuery.preloadCssImages = function(settings){
	var settings = jQuery.extend({
		statusTextEl: null,
		statusBarEl: null
	}, settings);
	
	var allImgs = [];//new array for all the image urls  
	var k = 0; //iterator for adding images
	var sheets = document.styleSheets;//array of stylesheets
	
	for(var i = 0; i<sheets.length; i++){//loop through each stylesheet
		var cssPile = '';//create large string of all css rules in sheet
		var csshref = (sheets[ i ].href) ? sheets[ i ].href : 'window.location.href';
		var baseURLarr = csshref.split('/');//split href at / to make array
		baseURLarr.pop();//remove file path from baseURL array
		var baseURL = baseURLarr.join('/');//create base url for the images in this sheet (css file's dir)
		if(baseURL!="") baseURL+='/'; //tack on a / if needed
		if(sheets[ i ].cssRules){//w3 
			var thisSheetRules = sheets[ i ].cssRules; //w3 
			for(var j = 0; j<thisSheetRules.length; j++){ 
				if ( sheets[ i ].cssRules[ j ].constructor == 'CSSImportRule' ) { //added support for @imported css - credit: http://marcarea.com/
					var importSheetRules = sheets[ i ].cssRules[ j ].styleSheet.cssRules; 
					for ( var x=0; x<importSheetRules.length; x++ ) { 
						cssPile+= importSheetRules[ x ].cssText; 
					} 
				} 
				else { 
					cssPile+= thisSheetRules[ j ].cssText; 
				} 
			} 
		} 
		else { 
			if ( sheets[ i ].imports.length > 0 ) { 
				for (var m=0; m<sheets[ i ].imports.length; m++) { 
					cssPile+= sheets[ i ].imports[ m ].cssText;
				} 
			} 
			else { 
				cssPile+= sheets[ i ].cssText; 
			} 
		}
		//parse cssPile for image urls and load them into the DOM
		var imgUrls = cssPile.match(/[^\(]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename"
		var loaded = 0; //number of images loaded

		if(imgUrls != null && imgUrls.length>0 && imgUrls != ''){//loop array\
			var arr = jQuery.makeArray(imgUrls);//create array from regex obj	 
			jQuery(arr).each(function(){
				allImgs[k] = new Image(); //new img obj
				allImgs[k].src = (this.charAt(0) == '/' || this.indexOf('http://')>-1) ? this : baseURL + this;	//set src either absolute or rel to css dir
				
				if(allImgs[k].src.lastIndexOf('http://')>0){allImgs[k].src = allImgs[k].src.split('%22')[1];} //fixed opera's source doubling
				
				$(allImgs[k]).load(function(){
					loaded++;
					//send updates to status elements if applicable
					if(settings.statusTextEl) {
						$(settings.statusTextEl).html('<span class="numLoaded">'+loaded+'</span> of <span class="numTotal">'+allImgs.length+'</span> loaded (<span class="percentLoaded">'+(loaded/allImgs.length*100).toFixed(0)+'%</span>) <span class="currentImg">Now Loading: <span>'+allImgs[loaded-1].src.split('/')[allImgs[loaded-1].src.split('/').length-1]+'</span></span>');
					}
					if(settings.statusBarEl) {
						var barWidth = $(settings.statusBarEl).width();
						$(settings.statusBarEl).css('background-position', -(barWidth-(barWidth*loaded/allImgs.length).toFixed(0))+'px 50%');
					}
				});
				k++;
			});
		}
	}//loop
	return allImgs;
}				

How do I use it?

Paste the code above into your JavaScript file and run $.preloadCssImages(); when the DOM is ready. Don't forget that you'll also need to reference the jQuery javascript library in your page.

Additional options

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.

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.

Download preloadCssImages.jQuery_v4.js

This script is a jQuery plugin, meaning is is dependant 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 encounter any issues or have any questions or suggestions please leave a comment below.