This repository has been archived by the owner on Aug 31, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 16
/
preloadCssImages.jQuery_v5.js
152 lines (140 loc) · 5.95 KB
/
preloadCssImages.jQuery_v5.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
/**
* jQuery-Plugin "preloadCssImages"
* by Scott Jehl, [email protected]
* 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_v2.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: 5.0, 10.31.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.
* 10.31.2008 Version: 5.0 : Many feature and performance enhancements from trixta
* --------------------------------------------------------------------
*/
;jQuery.preloadCssImages = function(settings){
settings = jQuery.extend({
statusTextEl: null,
statusBarEl: null,
errorDelay: 999, // handles 404-Errors in IE
simultaneousCacheLoading: 2
}, settings);
var allImgs = [],
loaded = 0,
imgUrls = [],
thisSheetRules,
errorTimer;
function onImgComplete(){
clearTimeout(errorTimer);
if (imgUrls && imgUrls.length && imgUrls[loaded]) {
loaded++;
if (settings.statusTextEl) {
var nowloading = (imgUrls[loaded]) ?
'Now Loading: <span>' + imgUrls[loaded].split('/')[imgUrls[loaded].split('/').length - 1] :
'Loading complete'; // wrong status-text bug fixed
jQuery(settings.statusTextEl).html('<span class="numLoaded">' + loaded + '</span> of <span class="numTotal">' + imgUrls.length + '</span> loaded (<span class="percentLoaded">' + (loaded / imgUrls.length * 100).toFixed(0) + '%</span>) <span class="currentImg">' + nowloading + '</span></span>');
}
if (settings.statusBarEl) {
var barWidth = jQuery(settings.statusBarEl).width();
jQuery(settings.statusBarEl).css('background-position', -(barWidth - (barWidth * loaded / imgUrls.length).toFixed(0)) + 'px 50%');
}
loadImgs();
}
}
function loadImgs(){
//only load 1 image at the same time / most browsers can only handle 2 http requests, 1 should remain for user-interaction (Ajax, other images, normal page requests...)
// otherwise set simultaneousCacheLoading to a higher number for simultaneous downloads
if(imgUrls && imgUrls.length && imgUrls[loaded]){
var img = new Image(); //new img obj
img.src = imgUrls[loaded]; //set src either absolute or rel to css dir
if(!img.complete){
jQuery(img).bind('error load onreadystatechange', onImgComplete);
} else {
onImgComplete();
}
errorTimer = setTimeout(onImgComplete, settings.errorDelay); // handles 404-Errors in IE
}
}
function parseCSS(sheets, urls) {
var w3cImport = false,
imported = [],
importedSrc = [],
baseURL;
var sheetIndex = sheets.length;
while(sheetIndex--){//loop through each stylesheet
var cssPile = '';//create large string of all css rules in sheet
if(urls && urls[sheetIndex]){
baseURL = urls[sheetIndex];
} else {
var csshref = (sheets[sheetIndex].href) ? sheets[sheetIndex].href : 'window.location.href';
var baseURLarr = csshref.split('/');//split href at / to make array
baseURLarr.pop();//remove file path from baseURL array
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[sheetIndex].cssRules || sheets[sheetIndex].rules){
thisSheetRules = (sheets[sheetIndex].cssRules) ? //->>> http://www.quirksmode.org/dom/w3c_css.html
sheets[sheetIndex].cssRules : //w3
sheets[sheetIndex].rules; //ie
var ruleIndex = thisSheetRules.length;
while(ruleIndex--){
if(thisSheetRules[ruleIndex].style && thisSheetRules[ruleIndex].style.cssText){
var text = thisSheetRules[ruleIndex].style.cssText;
if(text.toLowerCase().indexOf('url') != -1){ // only add rules to the string if you can assume, to find an image, speed improvement
cssPile += text; // thisSheetRules[ruleIndex].style.cssText instead of thisSheetRules[ruleIndex].cssText is a huge speed improvement
}
} else if(thisSheetRules[ruleIndex].styleSheet) {
imported.push(thisSheetRules[ruleIndex].styleSheet);
w3cImport = true;
}
}
}
//parse cssPile for image urls
var tmpImage = cssPile.match(/[^\("]+\.(gif|jpg|jpeg|png)/g);//reg ex to get a string of between a "(" and a ".filename" / '"' for opera-bugfix
if(tmpImage){
var i = tmpImage.length;
while(i--){ // handle baseUrl here for multiple stylesheets in different folders bug
var imgSrc = (tmpImage[i].charAt(0) == '/' || tmpImage[i].match('://')) ? // protocol-bug fixed
tmpImage[i] :
baseURL + tmpImage[i];
if(jQuery.inArray(imgSrc, imgUrls) == -1){
imgUrls.push(imgSrc);
}
}
}
if(!w3cImport && sheets[sheetIndex].imports && sheets[sheetIndex].imports.length) {
for(var iImport = 0, importLen = sheets[sheetIndex].imports.length; iImport < importLen; iImport++){
var iHref = sheets[sheetIndex].imports[iImport].href;
iHref = iHref.split('/');
iHref.pop();
iHref = iHref.join('/');
if (iHref) {
iHref += '/'; //tack on a / if needed
}
var iSrc = (iHref.charAt(0) == '/' || iHref.match('://')) ? // protocol-bug fixed
iHref :
baseURL + iHref;
importedSrc.push(iSrc);
imported.push(sheets[sheetIndex].imports[iImport]);
}
}
}//loop
if(imported.length){
parseCSS(imported, importedSrc);
return false;
}
var downloads = settings.simultaneousCacheLoading;
while( downloads--){
setTimeout(loadImgs, downloads);
}
}
parseCSS(document.styleSheets);
return imgUrls;
};