jPreLoader Custom

jquery.jpreloader.js

/**
 jPreLoader Custom - jQuery plugin
 Original:		http://www.inwebson.com/demo/jpreloader-v2/
<div id="jpreOverlay">
  <div id="jpreLoader">
    <div id="jpreAnim">
      <img id="jpreAnimImg" src="loader.png" alt="loading">
    </div>
    <div id="jpreBarWrapper">
      <div id="jpreBar"></div>
    </div>
  </div>
</div>
*/

(function($) {
	var items = new Array(),
		errors = new Array(),
		onComplete = function() {},
		current = 0,
		jOverlay, jLoader, jBar, jAnimImg, jPer, jButton;

	var jpreOptions = {
		showPercentage: false,
		autoClose: true,
		onetimeLoad: false,
		debugMode: false,
    excludeClassName: 'nopreload',
		overflowMode: 1 //0=hidden->initial 1=hidden 2=initial
	}

	//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() {
		jLoader = $('#jpreLoader');
		jBar = $('#jpreBar');
		jAnimImg = $('#jpreAnimImg');
    var jAnimImgTimer;

		if(jpreOptions.overflowMode !== 2){
			$('body').css({
				overflow: 'hidden'
			});
		}

		if(jpreOptions.showPercentage) {
			jPer = $('#jprePercentage');
		}

		if( !jpreOptions.autoclose ) {
			jButton = $('#jpreButton').hide();
		}

		if(jAnimImg.length) {
      if(jAnimImg.width()) {
        jAnimImg.addClass('loaded');
      } else {
        jAnimImgTimer = setTimeout(function () {
          jAnimImg.addClass('loaded');
        }, 1000);
  			jAnimImg.on('load', function() {
  				$(this).addClass('loaded');
          clearTimeout(jAnimImgTimer);
  			});
      }
		}

	}

	//get all images from css and <img> tag
	var getImages = function(element) {
		$(element).find('*:not(script)').each(function() {
			var url = "";
      var getImgUrl = function(str) {
         var temp = str.match(/url\((.*?)\)/);
         return temp[1].replace(/\"/g, '');
       };
       var pushUrl = function (url) {
          if (url.length > 0) {
            items.push(url);
          }
       };

      if($(this).hasClass(jpreOptions.excludeClassName)) {
        return;
      }

			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) {
          if(url.indexOf(',') !== -1) {
            var urls = url.split(',');
            for(var i = urls.length; i--; ){
              if(urls[i].indexOf('url') !== -1) {
                url = getImgUrl(urls[i]);
                pushUrl(url);
              }
            }
          } else {
            url = getImgUrl(url);
            pushUrl(url);
          }
				}

			} else if ($(this).get(0).nodeName.toLowerCase() == 'img' && typeof($(this).attr('src')) != 'undefined') {
				url = $(this).attr('src');
        pushUrl(url);
			}
		});
	}

	//create preloaded image
	var preloading = function() {
		for (var i = 0; i < items.length; i++) {
			loadImg(items[i]);
		}
	}
	var loadImg = function(url) {
		var imgLoad = new Image();
		$(imgLoad)
		.on('load', function() {
			completeLoading();
		})
		.on('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();
			if(jpreOptions.overflowMode === 0) {
				$('body').css({
				  overflow: ''
				});
			}
			$(window).trigger(new $.Event('jpreloaded'));
			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;
		}

		return this.each(function() {
			jOverlay = $('#jpreOverlay');
			if( !(getCookie()) && jOverlay.length ) {
				createContainer();
				getImages(this);
				preloading();
			} else {	//onetime load / cookie is set
				onComplete();
			}
		});
    };

})(jQuery);

$(window).on('jpreloaded', function() {
 console.log('jpreloaded!!')
})

support to multiple background