?
頁面 Loading 條基本人人都會用。它的原理很簡單：在頁頭放置一個文字或者圖片的 loading 狀態，然后頁尾載入一段 JS 隱藏掉，即根據瀏覽器的載入順序來實現的簡易 Loading 狀態條。
?
?
上圖展示了傳統 Wordpress 模板在瀏覽器中的載入順序，Loading 條的出現和消失分布于頭尾。
?
?
如果我們在頁面的不同位置放置多個 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>
?
<!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)" 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.;
</script>
</body>
</html>
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>
?
<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>
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
