1. 编程号首页
  2. 编程基础

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

编程小号 • • 编程基础

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

链接主题：

预加载图片

延迟加载图片 Lazy Load

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

第一种方法：

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

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

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

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

如果我们在页面的不同位置放置多个 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" /> loading...</div>
	<iframe style="visibility:hidden" onreadystatechange="stateChangeIE(this)" οnlοad="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>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/39522.html

赞 (0)
编程小号编程小号
0
上一篇 2023-07-17
下一篇 2023-07-17

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注