로딩 화면 만들기

가끔가다 웹페이지에서 로딩화면이 필요할 경우가 있다. 예를 들어 버튼을 눌렀는데 데이터 불러오는게 느릴 때....

그래서 코드 어디서 긁어다가 내 입맛에 맞게 좀 지웠다... http://batt22.tistory.com/104 에서 긁어옴

로딩 시작화면을 넣고 싶으면 openLayeredDialog(); 를 넣고 끝내고 싶으면 closeLayeredDialog();를 넣는다.

화면 조절이 필요하면 adjustmentLayeredDialog()에 있는 

child_inner.style.height = 80;

child_inner.style.width = 360;

child_inner.style.top = top+150;

child_inner.style.left = left+220;

요거를 잘 조정해보자.

로딩이미지 바꾸고 싶으면 loading_src 수정

로딩이미지도 구글 어딘가에서 긁어왔다...;;

var loadingDivId = "loading_layer";

var loadingUrl = "loading.gif";

var minimumMargine = 50;

var maximumWidth = 800;

function openLayeredDialog() {

var div1 = document.createElement("DIV");

div1.id = loadingUrl;

div1.style.position = "absolute";

div1.style.height = "100%";

div1.style.width = "100%";

div1.style.top = "0";

div1.style.left = "0";

div1.style.background = "#000000";

div1.style.opacity = "0.6";

div1.style.filter = "alpha(opacity=60)";

var div2 = document.createElement("DIV");

div2.id = loadingDivId + "_inner";

div2.style.position = "absolute";

div2.style.background = "#ffffff";

var iframe1 = document.createElement("IFRAME");

iframe1.src = loadingUrl;

iframe1.frameborder = "0";

iframe1.style.height = "100%";

iframe1.style.width = "100%";

div2.appendChild(iframe1);

document.body.appendChild(div1);

document.body.appendChild(div2);

adjustmentLayeredDialog();

window.onresize = function(event) {adjustmentLayeredDialog();};

}

function closeLayeredDialog() {

var child_background = document.getElementById(loadingUrl);

var child_inner = document.getElementById(loadingDivId + "_inner");   

if (child_background) {

document.body.removeChild(child_background);

}

if (child_inner) {

document.body.removeChild(child_inner);

}

window.onresize = null;

}

function adjustmentLayeredDialog() {

var child_inner = document.getElementById(loadingDivId + "_inner");

if (child_inner) {

var clientHeight = document.body.clientHeight;

var clientWidth = document.body.clientWidth;

var top = minimumMargine;

var left = 0;

var height = clientHeight - minimumMargine * 2;

var width = clientWidth - minimumMargine * 2;

if (width > maximumWidth) {

width = maximumWidth;

}

left = (clientWidth - width) / 2;

child_inner.style.height = 80;

child_inner.style.width = 360;

child_inner.style.top = top+150;

child_inner.style.left = left+220;

}

}