在html页面中用jquery实现加载的效果。
我是做python开发的，然后html页面由于数据太多，加载的比较慢，所以我想实现下图效果。这个是比如我想显示的数据，我是个新手请求帮助，谢谢。<divid="main"...
我是做python开发的，然后html页面由于数据太多，加载的比较慢，所以我想实现下图效果。这个是比如我想显示的数据，我是个新手请求帮助，谢谢。<div id="main" style="width:90%;"> <table class="table table-bordered table-striped table-condensed" style="width:100%;"> <tr> <th>Name</th> <th>PastDue</th> <th>Advanced</th> <th>AboutOf</th> <th>Exceed</th> <th>sldd</th> </tr> <tr py:for="bug in mail_settings"> <td>${bug.pastDoName}</td> <td>${bug.pastDue}</td> <td>${bug.advanced}</td> <td>${bug.aboutOf}</td> <td>${bug.exceed}</td> <td>${bug.sldd}</td> </tr> </table> </div>
展开
2个回答
展开全部
首先，你要在<head>中引入jquery的js,
然后
<div id="main" style="width:90%;">
<table class="table table-bordered table-striped table-condensed" style="width:100%;">
<tr>
<th>Name</th>
<th>PastDue</th>
<th>Advanced</th>
<th>AboutOf</th>
<th>Exceed</th>
<th>sldd</th>
</tr>
<div class="loading">
<img src="loading.gif">
</div>
<tbody class="pybody" style="display: none">
<tr py:for="bug in mail_settings">
<td>${bug.pastDoName}</td>
<td>${bug.pastDue}</td>
<td>${bug.advanced}</td>
<td>${bug.aboutOf}</td>
<td>${bug.exceed}</td>
<td>${bug.sldd}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$('.pybody').ready(function(){
$(".loading").fadeOut();
$(".pybody").fadeIn();
})
</script>
以上代码可以直接复制粘贴
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#mask_box {
display:block;
}
#mask_loading {
background-color: #ccc;
filter: alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;
position: absolute;
height: 100%;
width: 100%;
}
#loading_img {
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: -13px;
z-index: 1000;
width: 61px;
height: 25px;
background: url(../Images/loading.gif) no-repeat;
}
</style>
</head>
<body>
<div id="mask_box">
<div id="mask_loading"></div>
<div id="loading_img"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#mask_box {
display:block;
}
#mask_loading {
background-color: #ccc;
filter: alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;
position: absolute;
height: 100%;
width: 100%;
}
#loading_img {
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: -13px;
z-index: 1000;
width: 61px;
height: 25px;
background: url(../Images/loading.gif) no-repeat;
}
</style>
</head>
<body>
<div id="mask_box">
<div id="mask_loading"></div>
<div id="loading_img"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
