Page Load Progress Bar

Display the progress bar on page load

by B L Praveen

HTML

<link rel="stylesheet" href="http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/nprogress/nprogress.css">
<script src="http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/nprogress/nprogress.js"></script>
<link rel="stylesheet" href="http://demo.tutorialzine.com/2013/09/quick-tip-progress-bar/assets/css/style.css">
<h1>Gallery Progress Bar</h1>
<div id="main"></div>
<a href="#" id="loadMore">Load More</a>

JavaScript

// Create a new jQuery plugin, which takes two arguments:
	//	  src - the URL of an image
	//	  deferred - a jQuery deferred object, created by the previously shown photo

	$.fn.showImage = function(src, deferred){

		var elem = $(this);

		// The deferred that this function will return
		var result = $.Deferred();

		// Construct the markup

		var holder = $('<div class="photo" />').appendTo(elem);

		// Start loading the the image

		var img = $('<img>');

		img.load(function(){

			// The photo has been loaded! Use the always method of the deferred
			// to get notified when the previous image has been loaded. When this happens,
			// show the current one.

			deferred.always(function(){

				// Trigger a custom event on the #main div:
				elem.trigger('image-loaded');

				// Append the image to the page and reveal it with an animation

				img.hide().appendTo(holder).delay(100).fadeIn('fast', function(){

					// Resolve the returned deferred. This will notifiy
					// the next photo on the page and call its always callback

					result.resolve()
				});
			});

		});

		img.attr('src', src);

		// Return the deferred (it has not been resolved at this point)
		return result;
	} 

(function($){

	// An array with photos to show on the page. In a normal web app
	// you would fetch this array from your server with AJAX.

	var photos =...