262 lines
6.0 KiB
JavaScript
262 lines
6.0 KiB
JavaScript
|
/*
|
||
|
* jPreLoader - jQuery plugin
|
||
|
* Create a Loading Screen to preload images and content for you website
|
||
|
*
|
||
|
* Name: jPreLoader.js
|
||
|
* Author: Kenny Ooi - http://www.inwebson.com
|
||
|
* Date: July 11, 2012
|
||
|
* Version: 2.1
|
||
|
* Example: http://www.inwebson.com/demo/jpreloader-v2/
|
||
|
*
|
||
|
*/
|
||
|
|
||
|
(function($) {
|
||
|
var items = new Array(),
|
||
|
errors = new Array(),
|
||
|
onComplete = function() {},
|
||
|
current = 0;
|
||
|
|
||
|
var jpreOptions = {
|
||
|
splashVPos: '35%',
|
||
|
loaderVPos: '50%',
|
||
|
splashID: '#jpreContent',
|
||
|
showSplash: true,
|
||
|
showPercentage: true,
|
||
|
autoClose: true,
|
||
|
closeBtnText: 'Start!',
|
||
|
onetimeLoad: false,
|
||
|
debugMode: false,
|
||
|
splashFunction: function() {}
|
||
|
}
|
||
|
|
||
|
//cookie
|
||
|
var getCookie = function() {
|
||
|
if( jpreOptions.onetimeLoad ) {
|
||
|
var cookies = document.cookie.split('; ');
|
||
|
for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
|
||
|
if ((parts.shift()) === "jpreLoader") {
|
||
|
return (parts.join('='));
|
||
|
}
|
||
|
}
|
||
|
return false;
|
||
|
} else {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
}
|
||
|
var setCookie = function(expires) {
|
||
|
if( jpreOptions.onetimeLoad ) {
|
||
|
var exdate = new Date();
|
||
|
exdate.setDate( exdate.getDate() + expires );
|
||
|
var c_value = ((expires==null) ? "" : "expires=" + exdate.toUTCString());
|
||
|
document.cookie="jpreLoader=loaded; " + c_value;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//create jpreLoader UI
|
||
|
var createContainer = function() {
|
||
|
|
||
|
jOverlay = $('<div></div>')
|
||
|
.attr('id', 'jpreOverlay')
|
||
|
.css({
|
||
|
position: "fixed",
|
||
|
top: 0,
|
||
|
left: 0,
|
||
|
width: '100%',
|
||
|
height: '100%',
|
||
|
zIndex: 9999999
|
||
|
})
|
||
|
.appendTo('body');
|
||
|
|
||
|
if(jpreOptions.showSplash) {
|
||
|
jContent = $('<div></div>')
|
||
|
.attr('id', 'jpreSlide')
|
||
|
.appendTo(jOverlay);
|
||
|
|
||
|
var conWidth = $(window).width() - $(jContent).width();
|
||
|
$(jContent).css({
|
||
|
position: "absolute",
|
||
|
top: jpreOptions.splashVPos,
|
||
|
left: Math.round((50 / $(window).width()) * conWidth) + '%'
|
||
|
});
|
||
|
$(jContent).html($(jpreOptions.splashID).wrap('<div/>').parent().html());
|
||
|
$(jpreOptions.splashID).remove();
|
||
|
jpreOptions.splashFunction()
|
||
|
}
|
||
|
|
||
|
jLoader = $('<div></div>')
|
||
|
.attr('id', 'jpreLoader')
|
||
|
.appendTo(jOverlay);
|
||
|
|
||
|
var posWidth = $(window).width() - $(jLoader).width();
|
||
|
$(jLoader).css({
|
||
|
position: 'absolute',
|
||
|
top: jpreOptions.loaderVPos,
|
||
|
left: Math.round((50 / $(window).width()) * posWidth) + '%'
|
||
|
});
|
||
|
|
||
|
jBar = $('<div></div>')
|
||
|
.attr('id', 'jpreBar')
|
||
|
.css({
|
||
|
width: '0%',
|
||
|
height: '100%'
|
||
|
})
|
||
|
.appendTo(jLoader);
|
||
|
|
||
|
if(jpreOptions.showPercentage) {
|
||
|
jPer = $('<div></div>')
|
||
|
.attr('id', 'jprePercentage')
|
||
|
.css({
|
||
|
position: 'relative',
|
||
|
height: '100%'
|
||
|
})
|
||
|
.appendTo(jLoader)
|
||
|
.html('Loading...');
|
||
|
}
|
||
|
if( !jpreOptions.autoclose ) {
|
||
|
jButton = $('<div></div>')
|
||
|
.attr('id', 'jpreButton')
|
||
|
.on('click', function() {
|
||
|
loadComplete();
|
||
|
})
|
||
|
.css({
|
||
|
position: 'relative',
|
||
|
height: '100%'
|
||
|
})
|
||
|
.appendTo(jLoader)
|
||
|
.text(jpreOptions.closeBtnText)
|
||
|
.hide();
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//get all images from css and <img> tag
|
||
|
var getImages = function(element) {
|
||
|
$(element).find('*:not(script)').each(function() {
|
||
|
var url = "";
|
||
|
|
||
|
if ($(this).css('background-image').indexOf('none') == -1 && $(this).css('background-image').indexOf('-gradient') == -1) {
|
||
|
url = $(this).css('background-image');
|
||
|
if(url.indexOf('url') != -1) {
|
||
|
var temp = url.match(/url\((.*?)\)/);
|
||
|
url = temp[1].replace(/\"/g, '');
|
||
|
}
|
||
|
} else if ($(this).get(0).nodeName.toLowerCase() == 'img' && typeof($(this).attr('src')) != 'undefined') {
|
||
|
url = $(this).attr('src');
|
||
|
}
|
||
|
|
||
|
if (url.length > 0) {
|
||
|
items.push(url);
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
//create preloaded image
|
||
|
var preloading = function() {
|
||
|
for (var i = 0; i < items.length; i++) {
|
||
|
if(loadImg(items[i]));
|
||
|
}
|
||
|
}
|
||
|
var loadImg = function(url) {
|
||
|
var imgLoad = new Image();
|
||
|
$(imgLoad)
|
||
|
.load(function() {
|
||
|
completeLoading();
|
||
|
})
|
||
|
.error(function() {
|
||
|
errors.push($(this).attr('src'));
|
||
|
completeLoading();
|
||
|
})
|
||
|
.attr('src', url);
|
||
|
}
|
||
|
|
||
|
//update progress bar once image loaded
|
||
|
var completeLoading = function() {
|
||
|
current++;
|
||
|
|
||
|
var per = Math.round((current / items.length) * 100);
|
||
|
$(jBar).stop().animate({
|
||
|
width: per + '%'
|
||
|
}, 500, 'linear');
|
||
|
|
||
|
if(jpreOptions.showPercentage) {
|
||
|
$(jPer).text(per+"%");
|
||
|
}
|
||
|
|
||
|
//if all images loaded
|
||
|
if(current >= items.length) {
|
||
|
current = items.length;
|
||
|
setCookie(); //create cookie
|
||
|
|
||
|
if(jpreOptions.showPercentage) {
|
||
|
$(jPer).text("100%");
|
||
|
}
|
||
|
|
||
|
//fire debug mode
|
||
|
if (jpreOptions.debugMode) {
|
||
|
var error = debug();
|
||
|
}
|
||
|
|
||
|
|
||
|
//max progress bar
|
||
|
$(jBar).stop().animate({
|
||
|
width: '100%'
|
||
|
}, 500, 'linear', function() {
|
||
|
//autoclose on
|
||
|
if( jpreOptions.autoClose )
|
||
|
loadComplete();
|
||
|
else
|
||
|
$(jButton).fadeIn(1000);
|
||
|
});
|
||
|
}
|
||
|
}
|
||
|
|
||
|
//triggered when all images are loaded
|
||
|
var loadComplete = function() {
|
||
|
$(jOverlay).fadeOut(800, function() {
|
||
|
$(jOverlay).remove();
|
||
|
onComplete(); //callback function
|
||
|
});
|
||
|
}
|
||
|
|
||
|
//debug mode
|
||
|
var debug = function() {
|
||
|
if(errors.length > 0) {
|
||
|
var str = 'ERROR - IMAGE FILES MISSING!!!\n\r'
|
||
|
str += errors.length + ' image files cound not be found. \n\r';
|
||
|
str += 'Please check your image paths and filenames:\n\r';
|
||
|
for (var i = 0; i < errors.length; i++) {
|
||
|
str += '- ' + errors[i] + '\n\r';
|
||
|
}
|
||
|
return true;
|
||
|
} else {
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
$.fn.jpreLoader = function(options, callback) {
|
||
|
if(options) {
|
||
|
$.extend(jpreOptions, options );
|
||
|
}
|
||
|
if(typeof callback == 'function') {
|
||
|
onComplete = callback;
|
||
|
}
|
||
|
|
||
|
//show preloader once JS loaded
|
||
|
$('body').css({
|
||
|
'display': 'block'
|
||
|
});
|
||
|
|
||
|
return this.each(function() {
|
||
|
if( !(getCookie()) ) {
|
||
|
createContainer();
|
||
|
getImages(this);
|
||
|
preloading();
|
||
|
}
|
||
|
else { //onetime load / cookie is set
|
||
|
$(jpreOptions.splashID).remove();
|
||
|
onComplete();
|
||
|
}
|
||
|
});
|
||
|
};
|
||
|
|
||
|
})(jQuery);
|