/* * 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 = $('
') .attr('id', 'jpreOverlay') .css({ position: "fixed", top: 0, left: 0, width: '100%', height: '100%', zIndex: 9999999 }) .appendTo('body'); if(jpreOptions.showSplash) { jContent = $('') .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('').parent().html()); $(jpreOptions.splashID).remove(); jpreOptions.splashFunction() } jLoader = $('') .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 = $('') .attr('id', 'jpreBar') .css({ width: '0%', height: '100%' }) .appendTo(jLoader); if(jpreOptions.showPercentage) { jPer = $('') .attr('id', 'jprePercentage') .css({ position: 'relative', height: '100%' }) .appendTo(jLoader) .html('Loading...'); } if( !jpreOptions.autoclose ) { jButton = $('') .attr('id', 'jpreButton') .on('click', function() { loadComplete(); }) .css({ position: 'relative', height: '100%' }) .appendTo(jLoader) .text(jpreOptions.closeBtnText) .hide(); } } //get all images from css and 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);