Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
Tags
- 워크식스
- 웹에이전시
- 제이쿼리
- 웹디자이너
- 플러그인
- 웹퍼블리싱
- 고도몰
- 웹개발자
- 포트폴리오
- 쇼핑몰
- 사이트제작
- 홈페이지
- plugin
- jQuery Plugin
- 홈페이지구축
- 튜닝
- 쇼핑몰구축
- 커스터마이징
- 웹디자인
- work6.kr
- 안드로이드
- 개발자
- PHP
- 프로그래머
- CSS
- 3D프린터
- 웹퍼블리셔
- 쇼핑몰제작
- JQuery
- 홈페이지제작
Archives
- Today
- Total
그냥 개발자 블로그
[워크식스] 스크롤 위치에따라 이미지 차례로 불러오기 -highImageLoader_1.0.js 본문
많은 양의 이미지를 스클로의 위치에 따라 차례로 로딩 시키는 플러그인 - 트래픽 및 사용자 홈페이지 속도 개선 가능
<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 |
| [워크식스] 라디오버튼에 스타일 적용하기 - 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 |