jQuery Preload CSS Images

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; 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(document.styleSheets[i].cssRules){//w3

            var thisSheetRules = document.styleSheets[i].cssRules; //w3

            for(var j = 0; j<thisSheetRules.length; j++){
                cssPile+= thisSheetRules[j].cssText;
            }
        }
        else {
            cssPile+= document.styleSheets[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"

        if(imgUrls != null &amp;&amp; imgUrls.length>0 &amp;&amp; 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