Created
October 21, 2014 18:14
-
-
Save rafaelcastrocouto/679cc0506c94ebd5809a to your computer and use it in GitHub Desktop.
jQuery Preload CSS Images
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 && 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[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(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment