实现原理：
根据页面执行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>
转载于:https://www.cnblogs.com/JoannaQ/archive/2013/03/22/2974872.html