페이지의 모든 내용이 표시되기전까지 로딩 화면이 뜰 수 있도록 해보자. 페이지에 많은 기능이 추가되고, 특정 데이터를 모두 받아온 다음에 사용자와 상호작용을 하고 싶다면 활용도가 높은 방법이다. 먼저 알아야 할 것은 페이지가 불러온 다음의 시점에 대한 점이다.
$(document).ready(function(){});
$(function(){});
window.onload = function(){};세 함수 모두 자바스크립트 단계에서 페이지 로드 후 이벤트에 해당한다. 하지만 시점마다 다 다른데...
세 코드를 실행해보면 순서가 다음과 같음을 알 수 있다.
$(document).ready(function(){});
$(function(){});두 함수는 동일한 기능을 취한다. 웹 DOM을 모두 불러온 다음에 실행한다. 매개변수로 콜백을 사용하기 때문에 특정 함수를 넣을 수도 있다.
window.onload = function(){};
$(window).on('load', function() {});모든 이미지, CSS등의 리소스가 완전히 불러와진 후 실행된다. 모든 리소스 이후에 실행되기 때문에 로딩 화면에 유용하다. 또한 페이지 호출 후 단 한번만 실행되기 때문에 초기값과 같은 설정에도 사용할 수 있다.
따라서 로딩 화면의 로직은 다음과 같다.
1. 웹 로딩화면을 덮은 상태로 시작한다.
2. 로딩이 완료된 시점에서 로딩 화면을 보이지 않게 처리한다.
구현은 다음과 같다.
<body>
<!-- 로딩 화면 -->
<div class="loading">
<img class="loadingImg" src='/assets/img/loading.gif'>
</div>
<!-- 본문 내용 -->
<div class="contents">
...
</div>
</body>다음과 같이 로딩 화면을 앞에 구현한다.
html{
overflow : 'hidden';
}
.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0,0.5);
z-index: 10;
transition: 0.5s ease;
}css에서 html은 "overflow : 'hidden';"으로 먼저 스크롤을 방지한다. 로딩 화면은 화면 가장 위에 있을수 있도록 z-index를 높은 값으로 지정하고 배경에 투명도를 약간 준다.
window.onload = function(){
setTimeout(function () {
$("html").css("overflow",'auto');
$(".loading").css("display","none");
}, 300);
};javascript에서는 로딩 화면을 사라지게 만들고 html의 스크롤을 다시 복구하는과정을 넣음으로써 로딩화면이 구현된다. 물론 html에 다양한 방법이 있지만 가장 평범한 과정이라고 생각한다.
