在html页面中用jquery实现加载的效果。
我是做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>
首先，你要在<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>
以上代码可以直接复制粘贴
<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>
jQuery怎么加载一个html页面到我指定的div里面
使用ajax。参考代码：(function(){ .ajax({ type:"POST", url:"LoginLoadArticle.ashx",data: "type="+escape("最新公告") ,success:function(msg){ (".gonggao").html(msg);}, error:function(XMLHttpRequest, textStatus, thrownError){}})})...
用JQuery实现页面Loading的效果,即:当页面加载完成前显示Loading的进度条...
一楼的方法不是正确的。如果简单地放一个loading图片在页面上的话，会有两种情况：一、有可能实现加载的效果 。 二、在整个页面其它元素加载了大部分或全部后，这张图片才加载进来，那就实现不了加载的效果了。常规的解决办法还是用ajax比较好。大概是这样的。需要两个页面。1.一个是实际页面本身 ...
html网页中如何引用jquery?
HTML网页中引用jQuery可遵循以下步骤：首先，从CDN链接引入jQuery库，使用<script>标签指向如https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js这样的URL。这一步骤利用CDN提供的快速服务器，确保加载速度。若需本地存储jQuery，将库文件放置在与HTML文件同一目录下，再使用<script>标签...
怎样用jquery在div中加载页面
使用jquery中的load事件。load事件可以载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。参数url,[data,[callback]]url:待装入 HTML 网页网址。data:发送至服务器的 key\/value 数据。在jQuery 1.3中也可以接受一个字符串了。callback:载入成功时回...
jquery load 加载HTML页面js怎么才能加载出来???
load（url[,data][,callback]）:向远程url发送异步请求，并直接将服务器响应插入当前jquery对象匹配的DOM元素之内。代码：index.html <form id="user">用户名:<input type="text" name="user" \/><br \/>喜欢的颜色:<select multiple="multiple" name="colors"><option value="red">红色<\/option...
请问html页面怎么引入公共的Html页面呢?
--第一种：jquery获取dom内的id，直接加载想要引入的页面--> <div id="page"><\/div> <script> $("#page").load("header.html"); <\/script><!--第二种：引入include.js文件，然后用include标签加载想要的页面 代码如下--> <script> (function(window, document, undef...
jq怎么用?
1.jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。2.然后我们来开始编辑HTML界面代码。3.使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的jQuery路径名称。4.接着再书写一个script标签对,里面写上jQuery入口函数,这样,当我们的HTML加载完成...
jquery解析html文本?
你好，你可以利用jquery的选择器手动向div中append一个由iframe标签组成的页面。在点button时，将此变量append到你所要添加的地方。这个方式比较多如果有现成的文本，包括json你可以用$(#id).html(page的内容)；这个要有编辑好的dom元素。使用jquery中的load事件。load事件可以载入远程HTML文件代码并插入至...
jQuery动态加载html
详细介绍：http:\/\/www.w3school.com.cn\/jquery\/ajax_load.asp 在当前html里写如下js：("#div1").load("test.html #div1");\/\/把test.html里面id为div1的加载到当前页的div1 ("#div2").load("test.html #div2");\/\/把test.html里面id为div2的加载到当前页的div2 ...
html网页内嵌一个ajax的页面,但是内嵌页面不能直接另外打开,需要开启...
(document).ready(function(){ .ajax({ type: "get",dataType: "html",url: "\/jquery\/aspx\/weather.aspx",\/\/要抓取的网页地址。data: "",success: function(data){ ("#ss").html(data)\/\/显示在你要显示的地方 ("#ShowWeather").html($(".mt6").eq(0).find("tr").eq(2).find(...
