jQuery plugin (2)

반응형




[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/

반응형
반응형



[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인



lazy는 게으른, 느릇한, 여유로운을 뜻하는 형용사입니다. 

단어의 뜻 그대로 lazyload는 게으른 이미지 로딩 플러그인을 뜻하는데요. 

즉 lazy load plugin은 화면에 보이는 영역의 이미지만 동적으로 로딩시켜 페이지의 로딩속도 향상, 

서버의 트래픽 절감 시켜주는 효과를 주는 이미지 플러그인입니다. 

말로 설명하자니 뭔가 체감이 안되실텐데요. 먼저 예제 사이트를 보시죠.



http://appelsiini.net/projects/lazyload/fadein/



해당 사이트처럼 이미지들이 전부 나오는게 아니라 이미지가 보고 있는 영역에 도달해야지만 로딩이 되게끔 보여지고 있습니다. 

세팅하는 방법도 무척 단순하죠. 아래 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다. 

페이지에서 해당 파일을 다운받아주세요. 페이지가 열리지 않는다면 여기서 다운받아주세요.


https://plugins.jquery.com/lazyload/

jquery.lazyload.min.js



파일을 받으셨다면 jquery.lazyload.min.js 파일을 폴더에 넣고 아래 스크립트를 </head> 안의 ctrl+c, ctrl+v 해주세요.


<script src="jquery.lazyload.min.js"></script>


html 안의 이미지를 넣을 부분에 class를 lazy라고 표기해주세요. (이미지들은 가지고 계신 이미지들을 넣어주시면 됩니다.)


<img class="lazy" src="...">
<img class="lazy" src="...">
<img class="lazy" src="...">


마지막으로 lazyload를 실행시키기 위한 스크립트를 넣어주면 완성입니다.


$("img.lazy").lazyload({
	effect : "fadeIn"
});


참조 :  http://appelsiini.net/projects/lazyload/



이 글을 올린 지가 2017년이었는데 덧글이 달려있어 오랜만에 확인해보니 

버전이 업데이트 되서 작동을 하지 않는 이슈가 있었다는 걸 뒤늦게 알게 되었습니다 ㅠㅠ

버전 1.8.2의 lazyload 플러그인 내용으로 수정된 파일과 변경된 페이지를 공유드립니다. 내용 참고 부탁드립니다.


https://appelsiini.net/projects/lazyload/



반응형