-
[워크식스] 스크롤 위치에따라 이미지 차례로 불러오기 -highImageLoader_1.0.js워크식스소식/플러그인소식 2018.04.05 10:00많은 양의 이미지를 스클로의 위치에 따라 차례로 로딩 시키는 플러그인 - 트래픽 및 사용자 홈페이지 속도 개선 가능
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="highImageLoader_1.0.js"></script>
<script>
$(document).ready(function(){
$('body').highImageLoader({
interval:1,
control:400
});
});
</script>
<div class="list">
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_mobile.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/shuk_2017_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/idis_201703_pc.png'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/cado.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/solution_basic2_design.jpg'></div>
</div>
1. 제이쿼리가 필요합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="highImageLoader_1.0.js"></script>
<script>
$(document).ready(function(){
$('body').highImageLoader({
interval:1,
control:400
});
});
</script>
<div class="list">
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_mobile.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/shuk_2017_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/idis_201703_pc.png'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/cado.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/solution_basic2_design.jpg'></div>
</div>
2. 다운로드 받은 플러그인을 설치 합니다. ( 플러그인은 워크식스 홈페이지에서 다운로드 받으실 수 있습니다. )
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="highImageLoader_1.0.js"></script>
<script>
$(document).ready(function(){
$('body').highImageLoader({
interval:1,
control:400
});
});
</script>
<div class="list">
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_mobile.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/shuk_2017_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/idis_201703_pc.png'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/cado.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/solution_basic2_design.jpg'></div>
</div>
3. 동작 시키고자 하는 img 태그에 loadsrc 요소를 추가하여 불러올 이미지 경로를 입력해 줍니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="highImageLoader_1.0.js"></script>
<script>
$(document).ready(function(){
$('body').highImageLoader({
interval:1,
control:400
});
});
</script>
<div class="list">
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_mobile.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/shuk_2017_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/idis_201703_pc.png'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/cado.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/solution_basic2_design.jpg'></div>
</div>
4. html 페이지 로딩이 완료되는 시점에 highImageLoader 가 동작할 수 있도록 해줍니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="highImageLoader_1.0.js"></script>
<script>
$(document).ready(function(){
$('body').highImageLoader({
interval:1,
control:400
});
});
</script>
<div class="list">
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_mobile.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/shuk_2017_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/idis_201703_pc.png'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/cado.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/solution_basic2_design.jpg'></div>
</div>
5. 한번에 로딩할 이미지 개수를 설정할 수 있습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="highImageLoader_1.0.js"></script>
<script>
$(document).ready(function(){
$('body').highImageLoader({
interval:1,
control:400
});
});
</script>
<div class="list">
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_mobile.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/shuk_2017_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/bccmall_201705_pc.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/idis_201703_pc.png'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/cado.jpg'></div>
<div><img src="loading.gif" loadsrc='http://work6.kr/skin2018/img/solution_basic2_design.jpg'></div>
</div>
6. 다음 이미지를 로딩시킬 스크롤 위치를 디테일하게 조절할 수 있습니다.
copyright ⓒ 2018. 워크식스
'워크식스소식 > 플러그인소식' 카테고리의 다른 글
[워크식스] 토글버튼을 만들기 자바스크립트 플러그인 - designToggle_1.0.js (0) 2018.06.20 [워크식스] select 에 css 적용하기 - designSelect_1.4.js (0) 2018.06.18 [워크식스] 스크롤 위치에따라 이미지 차례로 불러오기 -highImageLoader_1.0.js (0) 2018.04.05 [워크식스] 라디오버튼에 스타일 적용하기 - designRadio_1.0.js (0) 2018.01.03 [워크식스] 체크박스에 스타일 적용하기 - designCheckbox_1.0.js (0) 2017.12.28 [워크식스] select 에 css 적용하기 - designSelect_1.3.js (0) 2017.12.21