반응형




[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 변수들이 적혀져 있습니다.  

그 안에 해당 글귀나 혹은 글자 이미지를 넣어주시면 썸네일같은 로딩중 페이지를 만들 수 있습니다. 참고해주세요!



참고: http://joaopereirawd.github.io/fakeLoader.js/

반응형