1/* 2 * QueryLoader v2 - A simple script to create a preloader for images 3 * 4 * For instructions read the original post: 5 * http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/ 6 * 7 * Copyright (c) 2011 - Gaya Kessler 8 * 9 * Licensed under the MIT license: 10 * http://www.opensource.org/licenses/mit-license.php 11 * 12 * Version: 2.2 13 * Last update: 03-04-2012 14 * 15 */ 16(function($) { 17 /*Browser detection patch*/ 18 jQuery.browser = {}; 19 jQuery.browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase()); 20 jQuery.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase()); 21 jQuery.browser.opera = /opera/.test(navigator.userAgent.toLowerCase()); 22 jQuery.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); 23 24 if (!Array.prototype.indexOf) { 25 Array.prototype.indexOf = function (elt /*, from*/) { 26 var len = this.length >>> 0; 27 var from = Number(arguments[1]) || 0; 28 from = (from < 0) 29 ? Math.ceil(from) 30 : Math.floor(from); 31 if (from < 0) 32 from += len; 33 34 for (; from < len; from++) { 35 if (from in this && 36 this[from] === elt) 37 return from; 38 } 39 return -1; 40 }; 41 } 42 43 var qLimages = []; 44 var qLdone = 0; 45 var qLdestroyed = false; 46 47 var qLimageContainer = ""; 48 var qLoverlay = ""; 49 var qLbar = ""; 50 var qLpercentage = ""; 51 var qLimageCounter = 0; 52 var qLstart = 0; 53 54 var qLoptions = { 55 onComplete: function () {}, 56 backgroundColor: "#000", 57 barColor: "#fff", 58 overlayId: 'qLoverlay', 59 barHeight: 1, 60 percentage: false, 61 deepSearch: true, 62 completeAnimation: "fade", 63 minimumTime: 500, 64 onLoadComplete: function () { 65 if (qLoptions.completeAnimation == "grow") { 66 var animationTime = 500; 67 var currentTime = new Date(); 68 if ((currentTime.getTime() - qLstart) < qLoptions.minimumTime) { 69 animationTime = (qLoptions.minimumTime - (currentTime.getTime() - qLstart)); 70 } 71 72 $(qLbar).stop().animate({ 73 "width": "100%" 74 }, animationTime, function () { 75 $(this).animate({ 76 top: "0%", 77 width: "100%", 78 height: "100%" 79 }, 500, function () { 80 $('#'+qLoptions.overlayId).fadeOut(500, function () { 81 $(this).remove(); 82 qLoptions.onComplete(); 83 }) 84 }); 85 }); 86 } else { 87 $('#'+qLoptions.overlayId).fadeOut(500, function () { 88 $('#'+qLoptions.overlayId).remove(); 89 qLoptions.onComplete(); 90 }); 91 } 92 } 93 }; 94 95 var afterEach = function () { 96 //start timer 97 //qLdestroyed = false; 98 var currentTime = new Date(); 99 qLstart = currentTime.getTime(); 100 101 if (qLimages.length > 0) { 102 createPreloadContainer(); 103 createOverlayLoader(); 104 } else { 105 //no images == instant exit 106 destroyQueryLoader(); 107 } 108 }; 109 110 var createPreloadContainer = function() { 111 qLimageContainer = $("<div></div>").appendTo("body").css({ 112 display: "none", 113 width: 0, 114 height: 0, 115 overflow: "hidden" 116 }); 117 118 for (var i = 0; qLimages.length > i; i++) { 119 $.ajax({ 120 url: qLimages[i], 121 type: 'HEAD', 122 complete: function (data) { 123 if (!qLdestroyed) { 124 qLimageCounter++; 125 addImageForPreload(this['url']); 126 } 127 } 128 }); 129 } 130 131 }; 132 133 var addImageForPreload = function(url) { 134 var image = $("<img />").attr("src", url).bind("load error", function () { 135 completeImageLoading(); 136 }).appendTo(qLimageContainer); 137 }; 138 139 var completeImageLoading = function () { 140 qLdone++; 141 142 var percentage = (qLdone / qLimageCounter) * 100; 143 $(qLbar).stop().animate({ 144 width: percentage + "%", 145 minWidth: percentage + "%" 146 }, 200); 147 148 if (qLoptions.percentage == true) { 149 $(qLpercentage).text(Math.ceil(percentage) + "%"); 150 } 151 152 if (qLdone == qLimageCounter) { 153 destroyQueryLoader(); 154 } 155 }; 156 157 var destroyQueryLoader = function () { 158 $(qLimageContainer).remove(); 159 qLoptions.onLoadComplete(); 160 qLdestroyed = true; 161 }; 162 163 var createOverlayLoader = function () { 164 qLoverlay = $("<div id='"+qLoptions.overlayId+"'></div>").css({ 165 width: "100%", 166 height: "100%", 167 backgroundColor: qLoptions.backgroundColor, 168 backgroundPosition: "fixed", 169 position: "fixed", 170 zIndex: 666999, 171 top: 0, 172 left: 0 173 }).appendTo("body"); 174 qLbar = $("<div id='qLbar'></div>").css({ 175 height: qLoptions.barHeight + "px", 176 backgroundColor: qLoptions.barColor, 177 width: "0%", 178 position: "absolute", 179 top: "0" 180 }).appendTo(qLoverlay); 181 if (qLoptions.percentage == true) { 182 qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({ 183 height: "40px", 184 width: "100px", 185 position: "absolute", 186 fontSize: "4em", 187 top: "50%", 188 left: "50%", 189 marginTop: "-" + (59 + qLoptions.barHeight) + "px", 190 textAlign: "center", 191 marginLeft: "-50px", 192 color: qLoptions.barColor 193 }).appendTo(qLoverlay); 194 } 195 if ( !qLimages.length) { 196 destroyQueryLoader() 197 } 198 }; 199 200 var findImageInElement = function (element) { 201 var url = ""; 202 203 if ($(element).css("background-image") != "none") { 204 var url = $(element).css("background-image"); 205 } else if (typeof($(element).attr("src")) != "undefined" && element.nodeName.toLowerCase() == "img") { 206 var url = $(element).attr("src"); 207 } 208 209 if (url.indexOf("gradient") == -1) { 210 url = url.replace(/url\(\"/g, ""); 211 url = url.replace(/url\(/g, ""); 212 url = url.replace(/\"\)/g, ""); 213 url = url.replace(/\)/g, ""); 214 215 var urls = url.split(", "); 216 217 for (var i = 0; i < urls.length; i++) { 218 if (urls[i].length > 0 && qLimages.indexOf(urls[i]) == -1 && !urls[i].match(/^(data:)/i)) { 219 var extra = ""; 220 if ($.browser.msie && $.browser.version < 9) { 221 extra = "?" + Math.floor(Math.random() * 3000); 222 } 223 qLimages.push(urls[i] + extra); 224 } 225 } 226 } 227 } 228 229 $.fn.queryLoader2 = function(options) { 230 if(options) { 231 $.extend(qLoptions, options ); 232 } 233 234 this.each(function() { 235 findImageInElement(this); 236 if (qLoptions.deepSearch == true) { 237 $(this).find("*:not(script)").each(function() { 238 findImageInElement(this); 239 }); 240 } 241 }); 242 243 afterEach(); 244 245 return this; 246 }; 247 248 //browser detect 249 var BrowserDetect = { 250 init: function () { 251 this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; 252 this.version = this.searchVersion(navigator.userAgent) 253 || this.searchVersion(navigator.appVersion) 254 || "an unknown version"; 255 this.OS = this.searchString(this.dataOS) || "an unknown OS"; 256 }, 257 searchString: function (data) { 258 for (var i=0;i<data.length;i++) { 259 var dataString = data[i].string; 260 var dataProp = data[i].prop; 261 this.versionSearchString = data[i].versionSearch || data[i].identity; 262 if (dataString) { 263 if (dataString.indexOf(data[i].subString) != -1) 264 return data[i].identity; 265 } 266 else if (dataProp) 267 return data[i].identity; 268 } 269 }, 270 searchVersion: function (dataString) { 271 var index = dataString.indexOf(this.versionSearchString); 272 if (index == -1) return; 273 return parseFloat(dataString.substring(index+this.versionSearchString.length+1)); 274 }, 275 dataBrowser: [ 276 {
277 string: navigator.userAgent, 278 subString: "Chrome", 279 identity: "Chrome" 280 }, 281 { string: navigator.userAgent, 282 subString: "OmniWeb", 283 versionSearch: "OmniWeb/", 284 identity: "OmniWeb" 285 }, 286 { 287 string: navigator.vendor, 288 subString: "Apple", 289 identity: "Safari", 290 versionSearch: "Version" 291 }, 292 { 293 prop: window.opera, 294 identity: "Opera", 295 versionSearch: "Version" 296 }, 297 { 298 string: navigator.vendor, 299 subString: "iCab", 300 identity: "iCab" 301 }, 302 { 303 string: navigator.vendor, 304 subString: "KDE", 305 identity: "Konqueror" 306 }, 307 { 308 string: navigator.userAgent, 309 subString: "Firefox", 310 identity: "Firefox" 311 }, 312 { 313 string: navigator.vendor, 314 subString: "Camino", 315 identity: "Camino" 316 }, 317 { // for newer Netscapes (6+) 318 string: navigator.userAgent, 319 subString: "Netscape", 320 identity: "Netscape" 321 }, 322 { 323 string: navigator.userAgent, 324 subString: "MSIE", 325 identity: "Explorer", 326 versionSearch: "MSIE" 327 }, 328 { 329 string: navigator.userAgent, 330 subString: "Gecko", 331 identity: "Mozilla", 332 versionSearch: "rv" 333 }, 334 { // for older Netscapes (4-) 335 string: navigator.userAgent, 336 subString: "Mozilla", 337 identity: "Netscape", 338 versionSearch: "Mozilla" 339 } 340 ], 341 dataOS : [ 342 { 343 string: navigator.platform, 344 subString: "Win", 345 identity: "Windows" 346 }, 347 { 348 string: navigator.platform, 349 subString: "Mac", 350 identity: "Mac" 351 }, 352 { 353 string: navigator.userAgent, 354 subString: "iPhone", 355 identity: "iPhone/iPod" 356 }, 357 { 358 string: navigator.platform, 359 subString: "Linux", 360 identity: "Linux" 361 } 362 ] 363 364 }; 365 BrowserDetect.init(); 366 jQuery.browser.version = BrowserDetect.version; 367})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.