页面载入动画(loading)

来源：互联网发布：昆仑决知乎编辑：程序博客网时间：2024/04/30 10:34

通常我们在加载iframe,或者ajax请求的时候需一个遮罩动画，我们可以这样处理，使用一个绝对定位的div，高度宽度100%,然后append的body中

具体代码可以参考如下

/** * Author:Zhang Qi * Create:2013-03-28 * Function:在body中打开遮罩以及关闭 * */var LoadingUtils = {Open:function(){var top=  $(this).offset()==undefined?0:$(this).offset().top;var left=  $(this).offset()==undefined?0:$(this).offset().left;var appender=null;if($(this).parent().length==0){appender="body";}else{appender=$(this);}$("<div class=\"mask\"></div>").css({display : "block",width : $(this).outerWidth(),//100%height : $(this).outerHeight(),//heighttop:top,left:left}).appendTo(appender);//body$("<div class=\"mask-msg\"></div>").html("正在处理，请稍候...").appendTo(appender).css({display : "block",left : ($(this).outerWidth()-153) / 2+left,top :  ($(this).outerHeight()-42) / 2+top,});},Close:function(){$(".mask").remove();$(".mask-msg").remove();}}

样式表

.mask {  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  opacity: 0.3;  filter: alpha(opacity=30);  display: none;  background: #eee;}.mask-msg {  position: absolute;  padding: 12px 5px 10px 30px;  width: auto;  height: 16px;  border-width: 2px;  border-style: solid;  display: none;  border-color: #ddd;  font-size:12px;  background: #fff url('loading.gif') no-repeat scroll 5px center;}

如何调用

1.在DIV ww上显示遮罩

LoadingUtils.Open.call(document.getElementById("ww"));

2.遮罩住整个页面

<script type="text/javascript">$(document).ready(function() {LoadingUtils.Open.call(this);});</script>

扩展=========>IFrame中

window.parent().LoadingUtils.Close();

从子窗中关闭父页的loading动画