back

  • person_pin
  • calendar_today
  • remove_red_eye

[css/js] 로딩화면 만들기

페이지 정보

작성자 webpaper 댓글 0건 조회 18,598회 작성일 19-03-19 16:50

본문

로딩화면을 만드는 방법 간단하게.. 

#1 먼저 css 로 로딩중에 보여줄 화면을 만듭니다. 
보통 화면을 덮어서, 만듭니다. 

.loading{
	width:100%;
	height:100%;
	position:fixed;
	left:0px;
	top:0px;
	background:#fff;
	z-index:1000; /* 이 값으로 레이어의 위치를 조정합니다. */
}



#2 로딩으로 보여줄 div 를 화면에 넣습니다. 
보통 body 바로 담에 넣으면 됩니다.
<div class="loading"></div>


#3 페이지가 로드되었을 때 로딩화면을 감춥니다.

<script>
	$(window).load(function(){
		$(".loading").fadeOut();
	});
</script>



이렇게하면, 일단 페이지가 로드되면 하얀 loading div 가 보이고, 
페이지가 로드되면, 그 div 가 사라집니다.