30. php Loading Page While Page load(로딩페이지)

로딩페이지 지난 번에 이어 계속 진행하고자 한다.

 

오늘은 jquery와 CSS를 이용하여 구현을 하고자한다.

 

1. div를 만든다.

<div id="loader"></div>

2.css 속성을 만들어 준다.

#loader
{
	position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
    z-index : 10000;
    background : url('loader.gif') 50% 50% no-repeat rgb(249,249,249);
}

3. jquery 를 설정한다. DOM이 모두 로드를 하게 되면 Loader를 천천히 안보이게 한다.

$(window).on('load', function(){
	$('#loader').fadeOut('slow');
});

 

그리고 page를 떠날려할 때 javscript의 onbeforeUnload 속성을 사용한다.

$(window).on('beforeunload', function(){
	$('#loader').show();
}

 

이렇게 jquery-loading 과 jquery와 css를 이용하여 로딩페이지를 구현해 보았다.

 

혹시 더 좋은 아이디어가 있으신 분들은 댓글을 적어주시길 바랍니다.