프리로더(preloader) 사용과 구현
페이지로딩, 혹은 홈페이지를 처음 접속했을 때 사용자에게 지루함을 덜어주는 프리로더를 쉽고 간단하게 갖다 쓰자!
Preview
예제를 위해 구글에서 preloader라고 검색해서 무료로 공개되어 있는 gif 이미지를 다운받았다. FlatPreloaders_PixelBuddha.zip
압축을 해제하면 사이즈별로 폴더가 있고 그 안에는 7개의 프리로더가 들어있는데 그 중 원하는 스타일의 gif 파일을 갖다 쓰면 된다.
각자 프로젝트에 복사해 쓰자.
png 파일도 부분별로 전부 제공하니 수정해서 쓸 수도 있다.
구현
HTML
<div> 단! 하나! 위치는 전체 wrapper 역할의 최상단 div 바깥에..
1 | <div id="loading"></div> | cs |
CSS
position을 처음에 absoulte로 잡았는데, height 100% 일때 스크롤바가 생겨서 fixed로 변경했다.
1 2 3 4 5 6 | #loading { position: fixed; width: 100%; height: 100%; background: url('Preloader_3.gif') no-repeat center center; } | cs |
프리로더가 보일 때, 진짜 컨텐츠가 들어있는 부분은 보이면 안 되므로 display:none;
사실 fadeIn 혹은 show 를 이용해 프리로더가 사라지는 동시에 자연스럽게 나타나는 것처럼 보이면 좋은데, 환경에 따라 둘이 겹쳐서 나오거나, 컨텐츠가 먼저 나와버리거나 하는 경우가 있어서 아예 숨기고 로딩이 끝날 때 보이게 하는 것이 낫다.
1 2 3 | #content{ display:none; } | cs |
jQuery
두 방법이 존재하는데
$(document).ready() 는 DOM 객체만 기다려서 로드되면 처리되고
$(window).load() 는 외부 리소스나 이미지 등이 전부 로드되야 처리된다. 즉 1번이 2번보다 선행된다.
1 2 3 4 5 6 7 | $(document).ready(function() { alert(1); }); $(window).load(function() { alert(2) }); | cs |
이미지가 많거나 외부 라이브러리를 많이 가져다 쓴다던가 하면 1번이 낫겠고
프리로더는 단어 그대로 컨텐츠가 전부 로드될때까지 보여야 된다고 생각하면 2번을 쓰면 된다.
각자 목적에 맞게 골라서 함수안에 넣으면 된다.
1 2 3 | $('#loading').hide(); //or $('#loading').fadeOut(2000); | cs |
개인적으로는 hide()를 선호한다. hide에 밀리초단위 하이라이트를 줄 수도 있다.
로딩이 다 되서 프리로더를 숨겼다면 진짜 컨텐츠가 들어있는 태그는 다시 보여야지.
1 | $('#content').fadeIn(2000); | cs |
추가:
같은 곳에서 배포하는 건데 이것도 예뻐서 저장해야지.