페이지 로드 애니메이션(loading)

보통 iframe를 불러오거나 aax 요청을 할 때 커버 애니메이션이 필요합니다. 우리는 이렇게 처리할 수 있습니다. 절대적으로 위치를 정한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(),//height
				top: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 애니메이션을 닫습니다.