jQuery网站页面加载进度条js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网站页面加载进度条js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>

	<head>
		<meta charset="gb2312"/>
		<title>jQuery��վҳ����ؽ�����</title>
		<!--<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700" rel="stylesheet" />-->
		<!-- The Stylesheets -->
		<link href="assets/nprogress/nprogress.css" rel="stylesheet" />
		<link href="assets/css/style.css" rel="stylesheet" />

		<!--[if lt IE 9]>
			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>

	<body>

		<h1>jQuery��վҳ����ؽ�����</h1>

		<div id="main"></div>

		<a href="#" id="loadMore">Load More</a>
		<script src="jquery-1.7.2.min.js"></script>
		<script src="assets/nprogress/nprogress.js"></script>
		<script src="assets/js/script.js"></script>

	</body>
</html>

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','assets/photos/5.jpg','assets/photos/6.jpg','assets/photos/7.jpg','assets/photos/8.jpg','assets/photos/9.jpg','assets/photos/10.jpg','assets/photos/11.jpg','assets/photos/12.jpg','assets/photos/13.jpg','assets/photos/14.jpg','assets/photos/15.jpg','assets/photos/16.jpg','assets/photos/17.jpg','assets/photos/18.jpg','assets/photos/19.jpg','assets/photos/20.jpg','assets/photos/21.jpg','assets/photos/22.jpg','assets/photos/23.jpg','assets/photos/24.jpg','assets/photos/25.jpg','assets/photos/26.jpg','assets/photos/27.jpg','assets/photos/28.jpg','assets/photos/29.jpg','assets/photos/30.jpg','assets/photos/31.jpg','assets/photos/32.jpg','assets/photos/33.jpg','assets/photos/34.jpg','assets/photos/35.jpg'];
	$(document).ready(function(){
	// Define some variablesvar page = 0,loaded = 0,perpage = 10,main = $('#main'),expected = perpage,loadMore = $('#loadMore');
	// Listen for the image-loaded custom eventmain.on('image-loaded',function(){
	// When such an event occurs,advance the progress barloaded++;
	// NProgress.set takes a number between 0 and 1NProgress.set(loaded/expected);
	if(page*perpage >= photos.length){
	// If there are no more photos to show,// remove the load button from the pageloadMore.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 animationNProgress.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,created 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 returnvar result = $.Deferred();
	// Create the photo div,which will host the imagevar holder = $('<div class="photo" />').appendTo(elem);
	// Load the image in memoryvar 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 animationimg.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() callbackresult.resolve()}
);
}
);
}
);
	img.attr('src',src);
	// Return the deferred (it has not been resolved at this point)return result;
}
}
)(jQuery);

CSS代码(style.css):

/*-------------------------Simple reset--------------------------*/
*{margin:0;padding:0;}
/*-------------------------General Styles--------------------------*/
body{font:15px/1.3 'PT Sans Narrow',sans-serif;color:#5e5b64;padding-bottom:120px;}
a,a:visited{outline:none;color:#389dc1;}
a:hover{text-decoration:none;}
section,footer,header,aside{display:block;}
/*-------------------------The main container--------------------------*/
h1{font:bold 48px 'PT Sans Narrow',sans-serif;color:#5e5b64;text-align:center;padding-top:80px;position:relative;}
#main{position:relative;width:540px;margin:0 auto;padding-top:80px;}
#main .photo{background-color:#eee;height:320px;overflow:hidden;margin-bottom:10px;border-radius:2px;}
#main .photo img{width:100%;border-radius:2px;}
#loadMore{background-color:#5e9db7;background:-webkit-linear-gradient(top,#5f9eb9,#5c99b3);background:-moz-linear-gradient(top,#5f9eb9,#5c99b3);background:linear-gradient(top,#5f9eb9,#5c99b3);display:block;padding:18px 0;margin:20px auto 20px;width:540px;font-weight:bold;font-size:22px;text-align:center;text-decoration:none !important;color:#fff !important;border-radius:2px;box-shadow:0 1px 1px #e0e0e0;opacity:0.9;}
#loadMore:hover{opacity:1;}
/*----------------------------The Demo Footer-----------------------------*/
footer{width:770px;font:normal 16px Arial,Helvetica,sans-serif;padding:15px 35px;position:fixed;bottom:0;left:50%;margin-left:-420px;background-color:#1f1f1f;background-image:-webkit-linear-gradient(top,#1f1f1f,#101010);background-image:-moz-linear-gradient(top,#1f1f1f,#101010);background-image:linear-gradient(top,#1f1f1f,#101010);border-radius:2px 2px 0 0;box-shadow:0 -1px 4px rgba(0,0,0,0.4);z-index:1;}
footer a.tz{font-weight:normal;font-size:16px !important;text-decoration:none !important;display:block;margin-right:300px;text-overflow:ellipsis;white-space:nowrap;color:#bfbfbf !important;z-index:1;}
footer a.tz:before{content:'';background:url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 -53px;width:138px;height:20px;display:inline-block;position:relative;bottom:-3px;}
footer .close{position:absolute;cursor:pointer;width:8px;height:8px;background:url('http://cdn.tutorialzine.com/misc/enhance/v2_footer_bg.png') no-repeat 0 0px;top:10px;right:10px;z-index:3;}
footer #tzine-actions{position:absolute;top:8px;width:500px;right:50%;margin-right:-650px;text-align:right;z-index:2;}
footer #tzine-actions iframe{display:inline-block;height:21px;width:95px;position:relative;float:left;margin-top:11px;}

附件:下载该文件资源,减少时间成本(增值服务)