[워크식스] 스크롤 위치에따라 이미지 차례로 불러오기 -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. 워크식스