highImageLoader_1.0.js

많은 양의 이미지를 스크롤의 위치에 따라 차례로 로딩 시키는 플러그인

샘플영상

다운로드

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. 동작 시키고자 하는 이미지에 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. 다음 이미지를 로딩시킬 스크롤 위치를 디테일하게 조절할 수 있습니다.

플러그인 설치/보수는 무료로 지원 하지 않습니다.
위로

잠시만 기다려주세요.