JavaScript
Article

jQuery Preload CSS Images

By Sam Deering

This is a useful way of pre-loading css images before rendering JavaScript/jQuery animation for example. This Script is a little jQuery plugin that caches all images referenced in linked/imported CSS files (it iterates through each rule in each stylesheet attached and if the rule’s value contains an image URL, it loads the image, thus ensuring it’s available in the cache when used in the document.

The Preload CSS Images Function

jQuery.preloadCssImages = function(){

	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; i0 && 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[0] == '/' || this.match('http://')) ? this : baseURL + this;     //set src either absolute or rel to css dir
				k++;
			});
		}
	}//loop
	return allImgs;
}

Usage

//preload only
$.preloadCssImages();

//load into array
var preloadedImgs = $.preloadCssImages();

This is the array of images!

preload-images

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • Jeremy

    Thanks for this script, but how can i get the list of all images?

    • jquery4u

      @Jeremy – The list of all image is stored in variable imgUrls. Cheers
      Sam

  • Ethan

    Uncaught SyntaxError: Unexpected token ; jquery.preloadCssImages.js:34

    • Kumroi

      if(imgUrls != null && imgUrls.length>0 && imgUrls != ”)

      Change && for the apropriate char &&

      • kumori

        “& amp ; ” i mean…

        • Alexvb6

          You also need to replace < by <

          • Alexvb6

            I mean you need to replace “& lt ;” by <

  • Carla

    Sam, this executes successfully, but my rollovers still aren’t loaded.

  • Bassel Issa

    Hi Sam, nice work, but i think you need to handle the base64 images like background-image:url(data:image/gif;base64,R0lGODlhCgAKAIAAAOLi4 ……..)

  • http://scriptogr.am/rafaelcastrocouto rafæl

    Exactly what I was looking for … thx a lot for sharing …

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.