로딩 중 레이어(div) 띄우기, 만들기


저장이나 등록, 전송 버튼을 클릭 후 업로드 되는 동안 사용자가 버튼을 또 클릭하지 못하도록 버튼 클릭 시 레이어를 띄워서 클릭을 못하도록 가려둔다.

사용하는 방법은 버튼 클릭할 때 일어나는 ‘onclick’ 이벤트에서 일어나는 자바스크립트에 loading(1); 을 실행한다.

img_lo에 이미지를 미리 만들어주고, 미리 생성된 이미지를 화면에 포함시켜준다. 멈추는 경우가 발생할 수 있어 reloading_img()를 통해 실행하고 다시 이미지를 넣어준다.


수정사항

2013.08.09 z-index를 javascript에서 zIndex로 사용.

2013.08.12 console.log 버그를 찾고 수정하고 코드 정리함.

2013.08.27 멈추는 경우도 고려해 다시 수정.

var img_lo = document.createElement("span");
img_lo.innerHTML = "<img id="img_lo" src="./loading.gif" width="40" height="40">"

function loading(d) {	//변수 -> 이름,포지션 -> 높이,넓이 -> 마진,패딩 -> 위치 -> 기타
	if(d == 1) {
		var div_full = document.createElement("div");			// 화면 덮는 div
		var div_center = document.createElement("div");			// 센터 텍스트 담는 div
		var div_center2 = document.createElement("div");		// 센터 반투명 div
		var loading_text = document.createElement("p");			// 텍스트 p

		div_full.onclick = function() { alert("처리중 입니다. 잠시만 기다려주세요.") }
		div_center.onclick = function() { alert("처리중 입니다. 잠시만 기다려주세요.") }
	
		//var w = 0, h = 0;					// 크로스브라우징 높이,넓이 조절
		var w = '50%', h = '50%';				
	/*
			if (typeof (window.innerWidth) == 'number') { //Chrome
				 w = window.innerWidth / 2;
				 h = window.innerHeight / 2;
			} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
				 w = document.documentElement.clientWidth / 2;
				 h = document.documentElement.clientHeight / 2;
			} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) { //IE9
				 w = document.body.clientWidth / 2;
				 h = document.body.clientHeight / 2;
			}
	*/
		// 텍스트 태그 생성
		loading_text.style.height = "30";
		loading_text.style.width = "200";
		//loading_text.style.margin = "20px 0px 20px 0px";
		loading_text.style.margin = "15px 0px 15px 0px";
		loading_text.style.fontWeight = "bold";
		loading_text.innerHTML = "데이터 처리 중입니다.
잠시 기다려주십시오."; //전체 투명레이어 div_full.style.position = "absolute"; div_full.style.height = "100%"; div_full.style.width = "100%"; div_full.style.top = "0"; div_full.style.left = "0"; div_full.style.background = "#000000"; div_full.style.opacity = "0.0"; div_full.style.filter = "alpha(opacity=00)"; div_full.style.zIndex = "9995"; //이미지 중앙에 배치할 레이어 div_center.style.position = "absolute"; div_center.style.height = "100"; div_center.style.width = "200"; div_center.style.top = h; div_center.style.left = w; div_center.style.marginLeft = "-100px"; div_center.style.marginTop = "-50px"; div_center.style.textAlign = "center"; div_center.style.zIndex = "9998"; div_center2.style.position = "absolute"; div_center2.style.height = "100"; div_center2.style.width = "200"; div_center2.style.top = h; div_center2.style.left = w; div_center2.style.marginLeft = "-100px"; div_center2.style.marginTop = "-50px"; div_center2.style.background = "#ffffff"; div_center2.style.opacity = "0.8"; div_center2.style.filter = "alpha(opacity=80)"; div_center2.style.zIndex = "9996"; //포함시키기 div_center.appendChild(img_lo); div_center.appendChild(loading_text); document.body.appendChild(div_full); document.body.appendChild(div_center2); // 이미지는 투명도를 없애기 위해 다른 레이어를 바디에 포함. document.body.appendChild(div_center); // 이미지는 투명도를 없애기 위해 다른 레이어를 바디에 포함. } else if(d == 0) { div_full.parentNode.removeChild(div_full); div_center2.parentNode.removeChild(div_center2); div_center.parentNode.removeChild(div_center); } }

※ 자바스크립트에서는 CSS의 ‘z-index’를 사용할 때, ‘zIndex’로 사용해야 한다.


결론 :  나름 완성시킨 코드이지만 사용하면서 아직 문제점이 많을 것으로 보인다. 차근차근 코드를 수정해 나가야겠다.



'Web > JavaScript' 카테고리의 다른 글

[JS] 연산자 우선순위  (0) 2013.08.03
[JS] javascript 예약어  (0) 2013.08.02
[jQuery] Attribute Equals Selector [name="value"]  (0) 2013.07.16
[JS] 문자열 바꾸기 replace, 정규식  (0) 2013.07.05

+ Recent posts