/* * QueryLoader v2 - A simple script to create a preloader for images * * For instructions read the original post: * http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/ * * Copyright (c) 2011 - Gaya Kessler * * Licensed under the MIT license: * http://www.opensource.org/licenses/mit-license.php * * Version: 2.2 * Last update: 03-04-2012 * */ (function($) { /*Browser detection patch*/ jQuery.browser = {}; jQuery.browser.mozilla = /mozilla/.test(navigator.userAgent.toLowerCase()) && !/webkit/.test(navigator.userAgent.toLowerCase()); jQuery.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase()); jQuery.browser.opera = /opera/.test(navigator.userAgent.toLowerCase()); jQuery.browser.msie = /msie/.test(navigator.userAgent.toLowerCase()); if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (elt /*, from*/) { var len = this.length >>> 0; var from = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) from += len; for (; from < len; from++) { if (from in this && this[from] === elt) return from; } return -1; }; } var qLimages = []; var qLdone = 0; var qLdestroyed = false; var qLimageContainer = ""; var qLoverlay = ""; var qLbar = ""; var qLpercentage = ""; var qLimageCounter = 0; var qLstart = 0; var qLoptions = { onComplete: function () {}, backgroundColor: "#000", barColor: "#fff", overlayId: 'qLoverlay', barHeight: 1, percentage: false, deepSearch: true, completeAnimation: "fade", minimumTime: 500, onLoadComplete: function () { if (qLoptions.completeAnimation == "grow") { var animationTime = 500; var currentTime = new Date(); if ((currentTime.getTime() - qLstart) < qLoptions.minimumTime) { animationTime = (qLoptions.minimumTime - (currentTime.getTime() - qLstart)); } $(qLbar).stop().animate({ "width": "100%" }, animationTime, function () { $(this).animate({ top: "0%", width: "100%", height: "100%" }, 500, function () { $('#'+qLoptions.overlayId).fadeOut(500, function () { $(this).remove(); qLoptions.onComplete(); }) }); }); } else { $('#'+qLoptions.overlayId).fadeOut(500, function () { $('#'+qLoptions.overlayId).remove(); qLoptions.onComplete(); }); } } }; var afterEach = function () { //start timer //qLdestroyed = false; var currentTime = new Date(); qLstart = currentTime.getTime(); if (qLimages.length > 0) { createPreloadContainer(); createOverlayLoader(); } else { //no images == instant exit destroyQueryLoader(); } }; var createPreloadContainer = function() { qLimageContainer = $("
").appendTo("body").css({ display: "none", width: 0, height: 0, overflow: "hidden" }); for (var i = 0; qLimages.length > i; i++) { $.ajax({ url: qLimages[i], type: 'HEAD', complete: function (data) { if (!qLdestroyed) { qLimageCounter++; addImageForPreload(this['url']); } } }); } }; var addImageForPreload = function(url) { var image = $("").attr("src", url).bind("load error", function () { completeImageLoading(); }).appendTo(qLimageContainer); }; var completeImageLoading = function () { qLdone++; var percentage = (qLdone / qLimageCounter) * 100; $(qLbar).stop().animate({ width: percentage + "%", minWidth: percentage + "%" }, 200); if (qLoptions.percentage == true) { $(qLpercentage).text(Math.ceil(percentage) + "%"); } if (qLdone == qLimageCounter) { destroyQueryLoader(); } }; var destroyQueryLoader = function () { $(qLimageContainer).remove(); qLoptions.onLoadComplete(); qLdestroyed = true; }; var createOverlayLoader = function () { qLoverlay = $("
").css({ width: "100%", height: "100%", backgroundColor: qLoptions.backgroundColor, backgroundPosition: "fixed", position: "fixed", zIndex: 666999, top: 0, left: 0 }).appendTo("body"); qLbar = $("
").css({ height: qLoptions.barHeight + "px", backgroundColor: qLoptions.barColor, width: "0%", position: "absolute", top: "0" }).appendTo(qLoverlay); if (qLoptions.percentage == true) { qLpercentage = $("
").text("0%").css({ height: "40px", width: "100px", position: "absolute", fontSize: "4em", top: "50%", left: "50%", marginTop: "-" + (59 + qLoptions.barHeight) + "px", textAlign: "center", marginLeft: "-50px", color: qLoptions.barColor }).appendTo(qLoverlay); } if ( !qLimages.length) { destroyQueryLoader() } }; var findImageInElement = function (element) { var url = ""; if ($(element).css("background-image") != "none") { var url = $(element).css("background-image"); } else if (typeof($(element).attr("src")) != "undefined" && element.nodeName.toLowerCase() == "img") { var url = $(element).attr("src"); } if (url.indexOf("gradient") == -1) { url = url.replace(/url\(\"/g, ""); url = url.replace(/url\(/g, ""); url = url.replace(/\"\)/g, ""); url = url.replace(/\)/g, ""); var urls = url.split(", "); for (var i = 0; i < urls.length; i++) { if (urls[i].length > 0 && qLimages.indexOf(urls[i]) == -1 && !urls[i].match(/^(data:)/i)) { var extra = ""; if ($.browser.msie && $.browser.version < 9) { extra = "?" + Math.floor(Math.random() * 3000); } qLimages.push(urls[i] + extra); } } } } $.fn.queryLoader2 = function(options) { if(options) { $.extend(qLoptions, options ); } this.each(function() { findImageInElement(this); if (qLoptions.deepSearch == true) { $(this).find("*:not(script)").each(function() { findImageInElement(this); }); } }); afterEach(); return this; }; //browser detect var BrowserDetect = { init: function () { this.browser = this.searchString(this.dataBrowser) || "An unknown browser"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version"; this.OS = this.searchString(this.dataOS) || "an unknown OS"; }, searchString: function (data) { for (var i=0;i