ABOUT ME

-

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






    댓글 0

work6.kr