jquery loading 加载效果 有关问题
日期：2014-05-17 浏览次数：20346 次
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 }, // 数据加载完之前
------解决方案--------------------
比如：
下面是一个 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
------解决方案--------------------
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
