The principle:
According to the order page js execution of the mask layer and loading the picture was first displayed, until after page load is complete, js control picture disappears. Both place a text or picture in the header of the web page loading state, and then load the footer section of JS hidden away, simple Loading status bar of the browser according to the load order to achieve.
It is relatively simple steps:
1, where the first <body> </ body> starting place
<div id="loading"></div>
2, is placed between the frame styles and jquery <head> and </ head>
<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, placed at the bottom of the page
<script type="text/javascript"> $("#loading").fadeOut() </script>
A loading generated online photo site: http://preloaders.net/
Further analysis
The figure shows the sequence of traditional Wordpress template loaded in the browser, the appearance and disappearance Loading strips distributed in the head and tail.
If we place multiple pages of JS in different locations, each JS for gradually increasing the width of the Loading bar, then this article Loading undoubtedly will be more practical value. It eased the dry sense of visitors waiting to load a certain extent, while objectively reflect the progress of the page to load. If more coupled with built-in jQuery animation, it is entirely possible that comes with the browser status bar rival.
1, the introduction jQuery framework (must be placed in the header <head> tag within). Then placed in a <body> tag starting position:
<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; " > Test Page </ div > < Script type =" text / JavaScript " > // page load is complete removal mask $ ( " # XS3 " ) .remove (); $ ( " #grey_div " ) .remove (); </ Script > </ body > </ HTML >
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2013/03/22/2974872.html