jquery loading 加载效果 问题
下面是一个 loading 加载效果
<body>
<br />
<br />
<div style="margin:auto;border:1px solid #000;width:500px;height:20px;background:#eee;">
<div id="load" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#333333', endColorStr='#000000', gradientType='0');background:#333;width:0;height:20px;color:#fff;font:normal 10px arial;line-height:20px;text-align:center">
</div>
</div>
<script type="text/javascript">
var $Load=document.getElementById('load');
!function Loading(x,y)
{
++x;
$Load.innerHTML=Math.floor(x/y*100)+'%';
$Load.style.width=x+"px";
x==y||setTimeout(function(){Loading(x,y)},10);
}(0,500);
</script>
</body>
我想把它整入项目里去,下面是我 用js 加载数据的js
PageClick = function (pageclickednumber) {
jQuery.ajax({
url: 'webashx/textcase.ashx',
type: 'Get',
data: { pageindex: pageclickednumber },
success: function (data) {
jQuery("#result").append(data);//这里绑定数据
}
});
}
我想在数据未加载完的时候 显示 loading 加载的效果,数据加载完就 loading 隐藏，显示数据,这个该怎么写？
[解决办法]
beforeSend: function() { //dosomething }, // 数据加载完之前
[解决办法]
比如：
- JScript code
beforeSend: function() { $("#productTable").html(""); $("#productTableBefore").show(); $("#Pagination").hide() }, // 发送数据之前complete: function() { $("#productTableBefore").hide(); $("#Pagination").show() }, // 接收数据完毕 // Ajax成功 success: function(json) {}
[解决办法]
在你点击事件之前 ，做loading的效果
ajax请求成功，显示html
[解决办法]