- 南yi
-
loading一般是用于二次载入,或者ajax载入的时候使用。我用ajax为例。
需要一张载入的图片,我这里就以loading.gif表示。触发载入我使用点击某个按钮。
html片段
<!--促发按钮-->
<input type="button" id="need-load" value="载入">
<!--遮罩背景层-->
<div id="load-layout" style="position:fixed;width:100%;height:100%;top:0px;left:0px;opacity:0.4;background:#000;display:none;">
<!--放置载入图片层,让载入图片放在大致中心就可以,需要绝对中心的话可以在js中做微调,这里我就忽略-->
<div style="position:absolute;left:49%;top:200px;width:图片宽度px;height:图片高度px;">
<img src="load.gif">
</div>
</div>
jq代码
$(function(){
$("#need-load").click(function(){
var _this = $(this);//存储触发元素,以备后面调用
$(this).attr("disabled",true);//禁用按钮
$("#load-layout").show();
//需要对图片位置进行调整可以放这里,这里忽略
$.ajax({
url : "目标地址"
。。。//ajax相关的参数,忽略
success:function(res){//成功后撤销载入
//这个可以加入的一些撤销判定,这里忽略
//载入后的一些操作,比如某一块显示结果html,这里忽略
$("load-layout").hide();//隐藏载入层
_this.attr("disabled",false);//撤销按钮禁用
},
error:function(){
//这里可以做一些错误的提示
$("load-layout").hide();//隐藏载入层
_this.attr("disabled",false);//撤销按钮禁用
}
});
});
});
- 大鱼炖火锅
-
有个这样的想法。。。
比如在你前台要显示的地方随便做个<div id="read"></div>
<input type="button" value="提交到后台" id="sub">
$("#id").click(function(){
$("#read").html("Loading........");
$.post("houtai.php“,{data:data},function(result){
$(#read").html("数据加载成功!");
});
});
大概这个思路~
- FinCloud
-
<script src="jquery.js"></script>
<script src="jquery.blockUI.js"></script>
<script>
$.ajax({
url:"test.html",
before:function(){$.blockUI();},
complete:function(){$.unblock();}
});
</script>