jquery实现页面加载进度条

JS代码 2011-04-01 07:58:40 作者: 浩海代码网阅读() 评论字号：大中小订阅

实现原理：

根据页面执行js的顺序将遮罩层和loading图片最先显示出来，等到页面加载完成后，用js控制图片消失。使用jquery实现。

导入的jquery文件：

代码：

<!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>

一个在线生成loading图片的网站:http://preloaders.net/

下载源码： jindutiao