页面载入动画(loading)

通常我们在加载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动画

页面载入动画(loading)相关推荐

ajax页面载入动画,添加加载动画，jQuery的AJAX .load（）
对于我知道必须采取超过几毫秒的时间的潜力,我用Spin.js它没有任何外部依赖,并且是跨浏览器兼容 var opts = { lines: 13, // The number of lines to ...
PhP加载时显示动画,在微信小程序中如何使用loading组件显示载入动画
这篇文章主要介绍了微信小程序loading组件显示载入动画用法,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可以参考下本文实例讲 ...
jQuery 页面载入进度条 (必有一款适合你----综合搜集版)
链接主题: 预加载图片延迟加载图片 Lazy Load javascript图片浏览器的核心--图片预加载第一种方法: 页面 Loading 条基本人人都会用.它的原理很简单:在页头放置一个文字或 ...
网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不 ...
网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
CircleProgressBar 带载入动画的环形进度条
CircleProgressBar 项目地址:AlexMofer/CircleProgressBar 带载入动画的环形进度条,可高度配置,支持配置成表盘. 预览要求 minSdkVersion ...
js 写html加载中的效果,基于javascript实现页面加载loading效果
本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下效果图: 正在载入正在载入首页,请稍候. var line = "||" var ...
html 网页跳转动画效果,jQuery实现切换页面过渡动画效果_jquery
直接为大家介绍制作过程,希望大家可以喜欢. HTML结构该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-l ...

页面载入动画(loading)

页面载入动画(loading)相关推荐

最新文章

热门文章