js网站顶部进度条插件

assets/js/script.js
(function($){

	// An array with photos to show on the page. Instead of hard 
	// coding it, you can fetch this array from your server with AJAX.

	var photos = [
		'assets/photos/1.jpg',	'assets/photos/2.jpg',
		'assets/photos/3.jpg',	'assets/photos/4.jpg',
		// more photos here
	];

	$(document).ready(function(){		

		// Define some variables

		var page = 0,
			loaded = 0,
			perpage = 10,
			main = $('#main'),
			expected = perpage,
			loadMore = $('#loadMore');

		// Listen for the image-loaded custom event

		main.on('image-loaded', function(){

			// When such an event occurs, advance the progress bar

			loaded++;

			// NProgress.set takes a number between 0 and 1
			NProgress.set(loaded/expected);

			if(page*perpage >= photos.length){

				// If there are no more photos to show,
				// remove the load button from the page

				loadMore.remove();
			}
		});

		// When the load button is clicked, show 10 more images 
		// (controlled by the perpage variable)

		loadMore.click(function(e){

			e.preventDefault();

			loaded = 0;
			expected = 0;

			// We will pass a resolved deferred to the first image,
			// so that it is shown immediately.
			var deferred = $.Deferred().resolve();

			// Get a slice of the photos array, and show the photos. Depending
			// on the size of the array, there may be less than perpage photos shown

			$.each(photos.slice(page*perpage, page*perpage + perpage), function(){

				// Pass the deferred returned by each invocation of showImage to 
				// the next. This will make the images load one after the other:

				deferred = main.showImage(this, deferred);

				expected++;
			});

			// Start the progress bar animation
			NProgress.start();

			page++;
		});

		loadMore.click();
	});

	// Create a new jQuery plugin, which displays the image in the current element after
	// it has been loaded. The plugin takes two arguments:
	//	* src - the URL of an image
	//	* deferred - a jQuery deferred object, d by the previous call to showImage
	// 
	// Returns a new deferred object that is resolved when the image is loaded.

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

		var elem = $(this);

		// The deferred that this function will return

		var result = $.Deferred();

		// Create the photo div, which will host the image

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

		// Load the image in memory

		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;
	} 

})(jQuery);