[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인
페이지가 로드될 때 페이지가 다 띄워질 때까지 띄워지는 로딩중 화면을 제이쿼리 플러그인으로 간단하게 구현해보려 합니다.
다양한 로딩중 제이쿼리 플러그인이 있는데 그 중 fakeLoader로 로딩중 화면을 만들어보도록 하겠습니다.
https://github.com/joaopereirawd/fakeLoader.js
먼저, 해당 페이지에 접속하셔서 fakeLoader를 다운받아주세요.
알집을 다운 받으시면 알집 안에 fakeLoader.js와 fakeLoader.css를
첫화면을 로딩중 화면으로 띄우고 싶은 html 안에 스크립트로 세팅해주세요.
<link rel="stylesheet" href="fakeLoader.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="fakeLoader.js"></script>
<body> 바로 다음 안으로 <div id="fakeLoader"></div>를 넣어주세요.
<div id="fakeLoader"></div>
그 다음 </body> 안에 해당 스크립트를 넣어주세요. 스크립트 안에 해당 설정내용을 표기해두었는데
spinner의 경우에는 데모페이지에서 원하는 로딩이미지타입을 골라야합니다.
http://joaopereirawd.github.io/fakeLoader.js/demo/demo1.html
위 URL 데모페이지에서 원하는 spinner를 골라 적어주세요.
<script>
$(document).ready(function(){
$("#fakeLoader").fakeLoader({
timeToHide:1200, // 로딩중에 걸리는 시간, 1000은 1초
bgColor:"#f8f8f8", // 배경색
spinner:"spinner2" // 로딩중으로 원하는 로딩이미지타입
});
});
</script>
이렇게 세팅하면 로딩중 페이지가 완성되는데요, 원하는 로딩중 페이지가 이렇게 이미지만 있는 것이 아니라
썸네일처럼 글자까지 있는 것을 만들고 싶으신 분들은 fakeLoader.js 안의 26번째줄을 보시면
//Customized Spinners 라는 주석과 함께 spinner 변수들이 적혀져 있습니다.
그 안에 해당 글귀나 혹은 글자 이미지를 넣어주시면 썸네일같은 로딩중 페이지를 만들 수 있습니다. 참고해주세요!
'[공부]하는 몽씨 > jquery plugin' 카테고리의 다른 글
| [slick.js/swiper.js] 반응형 탭(slider tab) 만들기 (0) | 2021.10.14 |
|---|---|
| [typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기 (0) | 2020.04.07 |
| [JQueryRotate] 이미지 회전 애니메이션 (0) | 2017.06.16 |
| [lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인 (2) | 2017.06.14 |
| [animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2) | 2017.06.09 |
