프리로더(preloader)의 사용과 구현

프리로더(preloader) 사용과 구현

페이지로딩, 혹은 홈페이지를 처음 접속했을 때 사용자에게 지루함을 덜어주는 프리로더를 쉽고 간단하게 갖다 쓰자!

Preview

예제를 위해 구글에서 preloader라고 검색해서 무료로 공개되어 있는 gif 이미지를 다운받았다.     FlatPreloaders_PixelBuddha.zip

압축을 해제하면 사이즈별로 폴더가 있고 그 안에는 7개의 프리로더가 들어있는데 그 중 원하는 스타일의 gif 파일을 갖다 쓰면 된다.

각자 프로젝트에 복사해 쓰자.

png 파일도 부분별로 전부 제공하니 수정해서 쓸 수도 있다.

구현

HTML

<div> 단! 하나! 위치는 전체 wrapper 역할의 최상단 div 바깥에..

<div id="loading"></div>

CSS

position을 처음에 absoulte로 잡았는데, height 100% 일때 스크롤바가 생겨서 fixed로 변경했다.

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url('Preloader_3.gif') no-repeat center center;
}

프리로더가 보일 때, 진짜 컨텐츠가 들어있는 부분은 보이면 안 되므로 display:none;

사실 fadeIn 혹은 show 를 이용해 프리로더가 사라지는 동시에 자연스럽게 나타나는 것처럼 보이면 좋은데, 환경에 따라 둘이 겹쳐서 나오거나, 컨텐츠가 먼저 나와버리거나 하는 경우가 있어서 아예 숨기고 로딩이 끝날 때 보이게 하는 것이 낫다.

#content{
  display:none;
}

jQuery

두 방법이 존재하는데 

$(document).ready() 는 DOM 객체만 기다려서 로드되면 처리되고

$(window).load() 는 외부 리소스나 이미지 등이 전부 로드되야 처리된다. 즉 1번이 2번보다 선행된다.

$(document).ready(function() {
    alert(1);
});
 
$(window).load(function() {
    alert(2)
});

이미지가 많거나 외부 라이브러리를 많이 가져다 쓴다던가 하면 1번이 낫겠고 

프리로더는 단어 그대로 컨텐츠가 전부 로드될때까지 보여야 된다고 생각하면 2번을 쓰면 된다.

각자 목적에 맞게 골라서 함수안에 넣으면 된다. 

$('#loading').hide();
//or
$('#loading').fadeOut(2000);

개인적으로는 hide()를 선호한다. hide에 밀리초단위 하이라이트를 줄 수도 있다.

로딩이 다 되서 프리로더를 숨겼다면 진짜 컨텐츠가 들어있는 태그는 다시 보여야지.

$('#content').fadeIn(2000);

추가: 

같은 곳에서 배포하는 건데 이것도 예뻐서 저장해야지. 

freebie-archive-1394087512.zip