`
天梯梦
  • 浏览: 13638494 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

jQuery 页面载入进度条 (必有一款适合你----综合搜集版)

jQueryJavaScriptAjaxCSS浏览器 
阅读更多

链接主题：

预加载图片

延迟加载图片 Lazy Load

javascript图片浏览器的核心——图片预加载

 


第一种方法：

 

页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。

 

loading Process traditional

 

上图展示了传统 Wordpress 模板在浏览器中的载入顺序，Loading 条的出现和消失分布于头尾。

 

new loading bar

 

如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。

先来看一个演示：地址 。

 

要得到演示上的进度条效果，首先 ，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：

<div id="loading"><div></div></div>

CSS 可以这么写：

#loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}

准备工作到这里就做好了。

接着 ，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：

<script type="text/javascript">
$("#loading div").animate({width:"16px "})
</script>

其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：

<script type="text/javascript">
$("#loading").fadeOut()
</script>

用于载入完毕后隐藏进度条。

 

第二种

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Loading Status Bar</title>
<meta name="robots" content="noindex,follow" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
	document.writeln("<style type=\"text\/css\">#loading{width:100px;height:20px;background:#A0DB0E;padding:5px;position:fixed;left:0;top:0}#loading div{width:1px;height:20px;background:#F1FF4D;font:10px/20px Arial}<\/style>");
</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<noscript>您的浏览器不支持 Javascript</noscript>

<div id="loading">
	<div></div>
</div>

<? for($i=0;$i<100000;$i++){ echo $i;} ?>
	<script type="text/javascript">$("#loading div").animate({width:"16px"}).text("16%")</script>
<? echo '<br><br><br>'; for($i=0;$i<100000;$i++){ echo $i;} ?>

<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"34px"}).text("34%")},500)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"67px"}).text("67%")},1000)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"82px"}).text("82%")},1500)</script>
<script type="text/javascript">setTimeout(function(){$("#loading div").animate({width:"100px"}).text("100%")},2000)</script>
<script type="text/javascript">setTimeout(function(){$("#loading").hide(500)},3000)</script>

</body>
</html>
 

第三种 导向型

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Loading</title>
<style type="text/css">
.proccess{
	border:1px solid;
	width:8px;
	height:8px;
	background:#ffffff;
	margin:3px;
}
</style>

<script language="JavaScript">
	var url = 'http://deographics.com/';
</script>

</head>

<body  onLoad="location.href = url;" style='overflow:hidden; overflow-y:hidden'>
	<div align=center>
		<font class=fontbig>友情提示，页面正在加载中，请等待......</font>
		<div align="center">
			<form method="post" name="proccess">
				<script type="text/javascript"> 
					for(i=0;i<30;i++){
						document.write("<input class=proccess>");
					}
				</script>
			</form>
		</div>

		<div align="center">
			<script language=JavaScript>
				var p=0,j=0;
				var c=new Array('lightskyblue','white')
				setInterval('proccess();',100)
				function proccess(){
					document.forms.proccess.elements[p].style.background=c[j]; p+=1;
					if(p==30){ p=0;j=1-j; }
				}
			</script>
		</div>
	</div>

	<div align="center">
		<script>
			if (document.layers){
				document.write('<Layer src="' + url + ' " visibility="hide"> </Layer>');
			}else if (document.all || document.getElementById){
				document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');
			}else{
				location.href = url;
			}
		</script>
	</div>
</body>
</html>
 
 
第四种 iframe loading
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Iframe Loading</title>
</head>

<body>   
	<div id="load"><img src="http://sysimages.tq.cn/images/analysis_images/ajax-loader.gif" />&nbsp;loading...</div>
	<iframe style="visibility:hidden" onreadystatechange="stateChangeIE(this)" onload="stateChangeFirefox(this)" name="callframe" id="callframe" width="420" height="100" frameborder="0" scrolling="no" marginheight="0"></iframe>

	<script>   
		function stateChangeIE(_frame){
			if (_frame.readyState=="interactive"){ //state: loading ,interactive, complete
				var loader = document.getElementById("load");
				loader.innerHTML  = "";
				loader.style.display = "none";  
				_frame.style.visibility = "visible";   
			}   
		}

		function stateChangeFirefox(_frame){
			var loader = document.getElementById("load");
			loader.innerHTML  = "";
			loader.style.display = "none";  
			_frame.style.visibility = "visible";   
		}

		callframe.location.href="http://deographics.com/";
	</script>   
</body>
</html>

解释：

0: (Uninitialized) the send( ) method has not yet been invoked.
1: (Loading) the send( ) method has been invoked, request in progress.
2: (Loaded) the send( ) method has completed, entire response received.
3: (Interactive) the response is being parsed.
4: (Completed) the response has been parsed, is ready for harvesting.

0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了

第五种 加载图片 

<html>
<head>
<title>JavaScript图片预加载代码，显示loading</title>

<style type="text/css">
	div{
		border:#aaaaaa 3px solid;
		width:200px;
		padding:2px;
		margin:2px 9px;
		font-size:12px;
		line-height:22px;
		color:#999999;
	}

	.ipt1{
		width:160px;
		font-size:12px;
		color:#1F6478;
		border:#999999 1px solid;
		margin-left:9px;
	}

	.ipt2{
		border:#999999 1px solid;
		margin-left:6px;color:#666666；
	}

	p{
		margin:0px;
		padding:0px;
		background-image:url(http://www.codefans.net/jscss/demoimg/loading.gif);
		background-position:center;
		background-repeat:no-repeat;
		width:200px;
		height:200px;
		text-align:center;
		font-size:12px;
		color:#999999;
		line-height:26px;
	}
</style>

<script language="javascript" type="text/javascript">
	function preloadimg(url,obj,ipt){
		var img = new Image();
		obj.innerHTML = "<p>Loading...</p>";
		img.onload = function(){
			obj.innerHTML = "";
			obj.style.width = String(img.width)+"px";
			ipt.style.width = String(img.width-40)+"px";
			obj.appendChild(img);
		};

		img.onerror = function(){
			obj.innerHTML="Loading Fail !"
		};

		img.src = url; //img.src 一定要写在img.onload之后，否则在IE中会出现问题
	}

	function show(){
		var div = document.getElementsByTagName("div")[0];
		var input = document.getElementsByTagName("input");

		preloadimg("http://www.codefans.net/jscss/demoimg/wall9.jpg",div,input[0]);
		input[0].onclick = function(){this.value=""};
		input[1].onclick = function(){preloadimg(input[0].value,div,input[0]);}
	}
	window.onload = show;
</script>

</head>

<body>
<div></div><br />
<input type="text" value="将图片地址粘贴在这里" class="ipt1"/><input type="button" value="开始加载" class="ipt2"/>
</body>
</html>
 
或者使用

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="MinmyLazyload.js" type="text/javascript"></script>
<body>
<img original="http://justcoding.iteye.com/uploadfiles/20100424-2_20914.jpg">
<img original="http://justcoding.iteye.com/uploadfiles/20100423-1_85399.jpg">
<script type="text/javascript">$("img").lazyload({ placeholder: "img-loader.gif", effect:"fadeIn" });
</script>
</body>
 
minimylazyload.js 在附件中找

第六种 本页
 
<style>
	#loading{font-size:12px;color:#FFFFFF;background:#FF0000;position:absolute;top:500px;left:500px; z-index:1002; padding:2px 10px 2px 10px}
</style>

<body>
	<div id="loading">页面加载中…</div>
	 
	..........
	 
	<script type="text/javascript">
		document.write('<style>#loading{display:none;}</style>');
	</script>
</body>
</html>
分享到：
| 网页插入PDF
评论
3 楼 雏鸟上路 2013-08-09  
2 楼 天梯梦 2010-06-21  
能用到就好，哈哈~~
1 楼 javatim 2010-06-20  
很棒，剛剛要用到。很全……謝謝兄台！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery进度条载入特效.rar

    jquery进度条载入特效

    jQuery 页面载入进度条实现代码

    上图展示了传统 WordPress 模板在浏览器中的载入顺序... 要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 &lt;head&gt; 标签内)。然后在 &lt;body&gt; 标签起始位置放置： 代码如下:&lt;div id=”loa

    jquery进度条载入特效.zip

    jquery进度条载入特效.zip

    基于jQuery+CSS3进度条载入特效

    基于jQuery+CSS3进度条载入特效

    30 个 jQuery & CSS3 加载动画和进度栏插件

    30 个 jQuery & CSS3 加载动画和进度栏插件

    jQuery EasyUI ProgressBar进度条组件

    ProgressBar（进度条）组件，这个还是挺好玩的，我们在自己做点什么的时候经常能用到，比如上传下载文件、导入导出文档啊、载入网页等等。 应用场景很多，使用起来还很简单。 示例： &lt;!DOCTYPE html&gt; &lt;...

    jquery多彩百分比投票效果.zip

    jquery多彩百分比投票效果是一款多种颜色展示的百分比投票显示效果，载入页面是以动态的效果显示百分比对应的进度条，可以自定义颜色与数量，在js里面定义百分比的数值与颜色代码，很不错的一个百分比展示效果。

    CSS3 引入jquery实现页面加载的LOADING效果.rar

    CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入...

    jquery进度条载入特效特效代码

    CSS3 引入jquery实现页面加载的LOADING效果

    CSS3 引入jquery实现页面加载的LOADING效果，就是一个载入动画，一个加载的进度条效果，圆形小圆点在不断的旋转，当加载完毕后，自动消失，本页面由HTML5技术和jquery共同实现，LOADING和页面显示两者之间同样也加入...

    jquery多彩百分比投票效果特效代码

    jquery多彩百分比投票效果是一款多种颜色展示的百分比投票显示效果，载入页面是以动态的效果显示百分比对应的进度条，可以自定义颜色与数量，在js里面定义百分比的数值与颜色代码，很不错的一个百分比展示效果。

    新浪娱乐首页幻灯片焦点图代码.rar

    新浪娱乐首页幻灯片焦点图代码是一款基于jQuery和jquery.orbit.js制作的网站使用的图片幻灯片焦点图效果代码，带有左右大箭头、播放/暂停按钮、图片载入进度条，支持图片自动轮播。

    dropzone:jQuery图像上传器

    拖放区jQuery图像上传器插件参数： nameClass 上传文件名设置上传文件名单元格CSS类progressClass 上传进度栏设置进度条包装器块CSS类lineClass 上传进度行设置进度条块CSS类PreviewClass 上传预览设置图像预览块CSS...

    大名鼎鼎SWFUpload- Flash+JS 上传

    　该事件在整个文件的上传过程中定期性的被Flash控件自动触发，用以帮助开发者实时更新页面UI来制作上传进度条。 　注意：该事件在Linux版本的Flash Player中存在问题，目前还无法解决。 　- 传入参数 　file object...

    jQuery+php实现ajax文件即时上传的详解

    本文结合实例讲解如何使用jQuery和PHP实现Ajax即时上传文件的功能，用户只需选择本地图片确定后即实现上传，并显示上传进度条，上传完成后，显示图片信息。 HTML本示例基于jQuery以及相当出色的jquery.form插件，...

    html5自定义视频控件

    html5自定义视频控件，加入评论，载入弹幕，鼠标悬浮在进度条显示某时刻画面，视频卡端显示加载动画，清晰度切换等功能；并添加了弹幕隐藏显示设置，播放速度设置，镜像翻转设置。

Magicbox
Global site tag (gtag.js) - Google Analytics