Created
September 6, 2011 02:42
-
-
Save ike/1196439 to your computer and use it in GitHub Desktop.
Added some functionality to QueryLoader to make it easy to call a function at the end of the animation.
This file contains hidden or 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
var QueryLoader = { | |
/* | |
* QueryLoader Preload your site before displaying it! | |
* Author: Gaya Kessler | |
* Date: 23-09-09 | |
* URL: http://www.gayadesign.com | |
* Version: 1.0 | |
* | |
* A simple jQuery powered preloader to load every image on the page and in the CSS | |
* before displaying the page to the user. | |
*/ | |
overlay: "", | |
loadBar: "", | |
preloader: "", | |
items: new Array(), | |
doneStatus: 0, | |
doneNow: 0, | |
selectorPreload: "body", | |
ieLoadFixTime: 2000, | |
ieTimeout: "", | |
endCall: "", | |
init: function() { | |
if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") { | |
//break if IE6 | |
return false; | |
} | |
if (QueryLoader.selectorPreload == "body") { | |
QueryLoader.spawnLoader(); | |
QueryLoader.getImages(QueryLoader.selectorPreload); | |
QueryLoader.createPreloading(); | |
} else { | |
$(document).ready(function() { | |
QueryLoader.spawnLoader(); | |
QueryLoader.getImages(QueryLoader.selectorPreload); | |
QueryLoader.createPreloading(); | |
}); | |
} | |
//help IE drown if it is trying to die :) | |
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime); | |
}, | |
ieLoadFix: function() { | |
var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/); | |
if (ie[0].match("MSIE")) { | |
while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) { | |
QueryLoader.imgCallback(); | |
} | |
} | |
}, | |
imgCallback: function() { | |
QueryLoader.doneNow ++; | |
QueryLoader.animateLoader(); | |
}, | |
getImages: function(selector) { | |
var everything = $(selector).find("*:not(script)").each(function() { | |
var url = ""; | |
if ($(this).css("background-image") != "none") { | |
var url = $(this).css("background-image"); | |
} else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagName").toLowerCase() == "img") { | |
var url = $(this).attr("src"); | |
} | |
url = url.replace("url(\"", ""); | |
url = url.replace("url(", ""); | |
url = url.replace("\")", ""); | |
url = url.replace(")", ""); | |
if (url.length > 0) { | |
QueryLoader.items.push(url); | |
} | |
}); | |
}, | |
createPreloading: function() { | |
QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload); | |
$(QueryLoader.preloader).css({ | |
height: "0px", | |
width: "0px", | |
overflow: "hidden" | |
}); | |
var length = QueryLoader.items.length; | |
QueryLoader.doneStatus = length; | |
for (var i = 0; i < length; i++) { | |
var imgLoad = $("<img></img>"); | |
$(imgLoad).attr("src", QueryLoader.items[i]); | |
$(imgLoad).unbind("load"); | |
$(imgLoad).bind("load", function() { | |
QueryLoader.imgCallback(); | |
}); | |
$(imgLoad).appendTo($(QueryLoader.preloader)); | |
} | |
}, | |
spawnLoader: function() { | |
if (QueryLoader.selectorPreload == "body") { | |
var height = $(window).height(); | |
var width = $(window).width(); | |
var position = "fixed"; | |
} else { | |
var height = $(QueryLoader.selectorPreload).outerHeight(); | |
var width = $(QueryLoader.selectorPreload).outerWidth(); | |
var position = "absolute"; | |
} | |
var left = $(QueryLoader.selectorPreload).offset()['left']; | |
var top = $(QueryLoader.selectorPreload).offset()['top']; | |
QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload)); | |
$(QueryLoader.overlay).addClass("QOverlay"); | |
$(QueryLoader.overlay).css({ | |
position: position, | |
top: top, | |
left: left, | |
width: width + "px", | |
height: height + "px" | |
}); | |
QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay)); | |
$(QueryLoader.loadBar).addClass("QLoader"); | |
$(QueryLoader.loadBar).css({ | |
position: "relative", | |
top: "50%", | |
width: "0%" | |
}); | |
}, | |
animateLoader: function() { | |
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow; | |
if (perc > 99) { | |
$(QueryLoader.loadBar).stop().animate({ | |
width: perc + "%" | |
}, 500, "linear", function() { | |
QueryLoader.doneLoad(); | |
}); | |
} else { | |
$(QueryLoader.loadBar).stop().animate({ | |
width: perc + "%" | |
}, 500, "linear", function() { }); | |
} | |
}, | |
doneLoad: function() { | |
//prevent IE from calling the fix | |
clearTimeout(QueryLoader.ieTimeout); | |
//determine the height of the preloader for the effect | |
if (QueryLoader.selectorPreload == "body") { | |
var height = $(window).height(); | |
} else { | |
var height = $(QueryLoader.selectorPreload).outerHeight(); | |
} | |
//The end animation, adjust to your likings | |
$(QueryLoader.loadBar).animate({ | |
height: height + "px", | |
top: 0 | |
}, 500, "linear", function() { | |
$(QueryLoader.overlay).fadeOut(800); | |
$(QueryLoader.preloader).remove(); | |
}); | |
if (QueryLoader.endCall) { | |
$(QueryLoader.endCall); | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment