實現原理：
根據頁面執行js的順序將遮罩層和loading圖片最先顯示出來，等到頁面加載完成后，用js控制圖片消失。既在網頁的頭部放置一個文字或者圖片的 loading 狀態，然后頁尾載入一段 JS 隱藏掉，根據瀏覽器的載入順序來實現的簡易 Loading 狀態條。
比較簡單的步驟是：
1、首先在<body></body>開始的地方放置
<div id="loading"></div>
2、在<head>和</head>之間放置樣式和jquery框架
<style type="text/css"> #loading{z-index:1;padding:5px 0 5px 29px; background:url(images/loadingwy.gif) no-repeat 10px top;left:0;top:0;width:90px; position:fixed; height:21px} </style> <script type="text/javascript" src="images/jquery.js"></script>
3、在頁面的底部放置
<script type="text/javascript"> $("#loading").fadeOut() </script>
一個在線生成loading圖片的網站:http://preloaders.net/
進一步的分析
上圖展示了傳統 Wordpress 模板在瀏覽器中的載入順序，Loading 條的出現和消失分布於頭尾。
如 果我們在頁面的不同位置放置多個 JS ，每個 JS 用於逐步增加 Loading 條的寬度，那么這個 Loading 條無疑會更具實用價值。它在一定程度上緩解了訪客等待載入的枯燥感，同時還能客觀反映頁面載入的進度。若再配以 jQuery 內建的動畫效果，其完全可以與瀏覽器自帶的狀態條媲美。
1、引入 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; }
2、在模板各個部分的適當位置放置
<script type="text/javascript"> $("#loading div").animate({width:"16px"}) </script>
3、在 footer.php 最末尾放上：
<script type="text/javascript"> $("#loading").fadeOut() </script>
用於載入完畢后隱藏進度條。
加入百分比提示的進度條
1、首先在你要顯示進度條的位置加上標簽，寬度初始設置0px，然后運用jquery的animate動畫效果在相應的位置一個一個增加寬度，比如在正文頂部加上如下：
<script type="text/javascript"> $("#loading").animate({width:"30px"}).text("30%") </script>
#loading是進度推進部分，並顯示文字"30%"。按照圖里一個一個加到相應位置，改下width和text屬性就基本實現進度條了。
進度條是在這個基礎上改進的，我的進度條結構是這樣的：
<div id="loadbg"></div> <div id="reloading"> <div id="loadfull"></div> <div id="loadpercent"></div> <div id="loadtext">努力載入中.....</div> </div>
2、百分比顯示和"加載完畢"以及讓進度條消失的jquery代碼:
//進度條 function remindload(loadpercent) { var text="努力加載ing..." if (loadpercent) { $('#loadtext').html(String(loadpercent) + "%"+text); //顯示百分比 } } var i = 0; function loadover() { if (i > 100) { //當大於100%時消失進度條 $('#loadtext').html("加載完畢！").fadeIn("slow");//加載完畢提示 $('#loadpercent').animate({width:"0px"},2000); //減少#loadpercent的寬度，消失效果 $('#loadbg,#reloading>div').fadeOut(1600);//進度條消失 return; } if (i <= 100) { //百分比計數，延遲加載 setTimeout("loadover()", 100); remindload(i); i=i+5; } } $(document).ready(function() { loadover(); });
3、css代碼
/*loading*/ #loadbg{z-index:1;left:400px;top:255px;position:fixed;background:#d2d2d2;width:400px;height:88px;opacity:.6} #reloading{z-index:1;left:400px;top:255px;position:fixed;} #reloading div{position:absolute;} #loadfull,#loadpercent{height:28px;margin:30px 0 0 50px;} #loadfull{background:white;width:300px;opacity:.7} #loadpercent{background:#000;width:0px;opacity:.8} #loadtext{font-size:14px;z-index:2;width:300px;color:#fff;padding:35px 0 5px 59px;}
4、判斷代碼修改一下上面的loadover函數：
function loadover() { if($.browser.msie&&!$.support.style)//判斷的是IE內核，IE9卻是直接不在此列，HOHO~ { $('#loadtext').html("請使用<a href='http://www.google.com/chrome/index.html?hl=zh_cn&brand=CHMA&utm_campaign=zh_cn&utm_source=zh_cn-ha-apac-zh_cn-bk&utm_medium=ha' target='_blank'>Chrome</a>或者<a href='http://firefox.com.cn/' target='_blank'>Firefox</a>獲得最佳瀏覽體驗！").fadeIn("slow"); setTimeout(function() { $('#loadbg,#reloading>div,#loadpercent').fadeOut(1600); }, 5000); //5秒后消失 } else if (i>100) { $('#loadtext').html("加載完畢！").fadeIn("slow");//加載完畢提示 $('#loadpercent').animate({width:"0px"},2000); //減少#loadpercent的寬度，消失效果 $('#loadbg,#reloading>div').fadeOut(1600); return; }
使用遮罩層的具體案例：
<!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>fortestҳ</title> <link href="../style/css.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../js/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.bgiframe.min.js"></script> <script type="text/javascript" src="../js/jquery.modal.js"></script> <style type="text/css"> #grey_div{ position:absolute; background:#cccccc; left:0px; top:0px; filter:Alpha(Opacity=30); /* IE */ -moz-opacity:0.4; /* Moz + FF */ opacity: 0.4; } #xs3{ background:#FFFFFF; position:absolute; border:1px solid #CC66CC; display:none; } </style> </head> <body> <div id="xs3"> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="107" height="81"> </td> <!--loading的圖片--> <td width="220" height="19"><img src="../images/loading.gif" width="220" height="19" /></td> <td width="108" height="81"> </td> </tr> <tr> <td height="30" colspan="3" style="text-align:center; color:#FF0000; font-size:14px;">頁面加載中...</td> </tr> </table> </div> <script type="text/javascript"> //一開始就顯示遮罩和loading圖片 $.md({modal:"#xs3"}); </script> <div style="width:1440px;height:900px;overflow:hidden;"> 測試頁面 </div> <script type="text/javascript"> //頁面加載完成時去除遮罩 $("#xs3").remove(); $("#grey_div").remove(); </script> </body> </html>