[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 변수들이 적혀져 있습니다.
그 안에 해당 글귀나 혹은 글자 이미지를 넣어주시면 썸네일같은 로딩중 페이지를 만들 수 있습니다. 참고해주세요!
[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 |
[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인
lazy는 게으른, 느릇한, 여유로운을 뜻하는 형용사입니다.
단어의 뜻 그대로 lazyload는 게으른 이미지 로딩 플러그인을 뜻하는데요.
즉 lazy load plugin은 화면에 보이는 영역의 이미지만 동적으로 로딩시켜 페이지의 로딩속도 향상,
서버의 트래픽 절감 시켜주는 효과를 주는 이미지 플러그인입니다.
말로 설명하자니 뭔가 체감이 안되실텐데요. 먼저 예제 사이트를 보시죠.
http://appelsiini.net/projects/lazyload/fadein/
해당 사이트처럼 이미지들이 전부 나오는게 아니라 이미지가 보고 있는 영역에 도달해야지만 로딩이 되게끔 보여지고 있습니다.
세팅하는 방법도 무척 단순하죠. 아래 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다.
페이지에서 해당 파일을 다운받아주세요. 페이지가 열리지 않는다면 여기서 다운받아주세요.
https://plugins.jquery.com/lazyload/
파일을 받으셨다면 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"
});
이 글을 올린 지가 2017년이었는데 덧글이 달려있어 오랜만에 확인해보니
버전이 업데이트 되서 작동을 하지 않는 이슈가 있었다는 걸 뒤늦게 알게 되었습니다 ㅠㅠ
버전 1.8.2의 lazyload 플러그인 내용으로 수정된 파일과 변경된 페이지를 공유드립니다. 내용 참고 부탁드립니다.
https://appelsiini.net/projects/lazyload/
[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기 (0) | 2020.04.07 |
---|---|
[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인 (2) | 2017.07.24 |
[JQueryRotate] 이미지 회전 애니메이션 (0) | 2017.06.16 |
[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2) | 2017.06.09 |
[Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션 (0) | 2017.06.08 |