본문 바로가기

현재 위치
  1. HOME
  2. 쇼핑몰 TIP

쇼핑몰 TIP

온라인 쇼핑몰 제작부터 운영, 마케팅까지! 유용한 정보를 제공합니다.

카테고리 상세
번호 문의유형 제목
1225 [모바일] Lazy Loading 또는 '더보기' 기능 적용하기 조회수 9936
  • 작성일 2017-07-04 11:47:27
  • 추천 추천하기
  • 조회수 9936


이미지 로딩을 구현하는 두 가지 방법



product_additional 모바일 쇼핑몰의 상품 상세 이미지 로딩을

Lazy loading  또는 [더보기] 형태로 구현하는 방법을 알아보도록 해요!


2개 기능은 동시 사용할 수 없으며 각 쇼핑몰에 맞게 운영하면 됩니다.




01

Lazy Loading 사용하기



1. Lazy Loading 이란?


사용자 화면에 보이는 이미지만 로딩하고

다른 이미지들은 사용자가 스크롤하면서 이미지에 가까워지면 로딩되는 방식입니다.



2. 설정하기


쇼핑몰 관리자에서 '모바일 쇼핑몰 > 모바일 환경설정 > 이미지 로딩 속도 개선' 설정을 "사용함"으로 변경해주세요.


 



3. 불필요한 소스 삭제하기


상품 상세 화면에서 <divmodule="product_additional"> 의 모듈을 찾아

그 안에 아래 소스가 있다면 제거해주세요.


<!-@js(/js/module/product/additional.js)->
<!-@js(/js/module/product/additional_animation.js)->

# 중간생략

<div class="btnMore" id="btnMore">
    <a href="#none">
        더보기<span class="icoMore"></span>
    </a>
</div>



※ 기존 더보기 기능을 사용 중인 쇼핑몰의 경우 "사용함" 설정시 더보기 기능이 비활성화되며,

"사용 안 함" 설정 시 다시 활성화 됩니다.






02

'더보기' 방식 사용하기



 




1. 설정하기


Lazy Loading 과 '더보기'는 함께 사용할 수 없기 때문에

쇼핑몰 관리자의 '모바일 쇼핑몰 > 모바일 환경설정 > 이미지 로딩 속도 개선 설정'을 '사용 안 함'으로 설정해주세요.



2. 소스 추가하기


1) HTML


상품 상세 화면에서 <divmodule="product_additional">의 모듈을 찾아

그 안에 아래 파란색 소스를 추가해주세요.



#상단생략

<div module="product_additional">
    <!-@css(/css/module/product/additional.css)->
    <!-@css(/css/module/product/additional_animation.css)->
    <!-@js(/js/module/product/additional.js)->
    <!-@js(/js/module/product/additional_animation.js)->

#중간생략

<!-- 상세정보 -->
<div id="prdDetail">
    <div class="button" id="prdDetailBtn">
        <a href="/product/zoom.html?product_no={$product_no}" target="_blank" class="btnNormal">원본보기 <span class="ico"></span></a>
    </div>
    <div id="prdDetailContent">{$product_detail}</div>
    <div class="btnMore" id="btnMore">
        <a href="#none">
            더보기<span class="icoMore"></span>
        </a>
    </div>
</div>




2) 자바 스크립트


위 html을 적용한 후, 해당 javascript 파일에 아무 내용이 없다면

해당 소스는 정상 작동하지 않습니다.



하단 소스를 각각 추가해주세요.




<!-@js(/js/modyle/product/additional.js)->


$(function(){
    var sModule = \\'#prdDetail\\', $pop = $(sModule).find(\\'img\\');

    // set pop image
    $pop.each(function(i){ $(this).data('index', i).css('z-index', '100'); });

    $pop.click(function(){
        var _index = $(this).data('index');
        $pop.each(function(i){
            if (i != _index) {
                $(this).css("z-index", "100").removeClass();
            } else {
                $(this).css("z-index", "9999");
                $(this).removeClass().delay(1).queue(function (a) {
                    $(this).addClass("animate pop");
                    a();
                    $(this).dequeue();
                });
            }
        });
    });
});




<!-@js(/js/modyle/product/additional_animation.js)->


$(function(){
    var sModule = '#prdDetail', $pop = $(sModule).find('img');

    // set pop image
    $pop.each(function(i){ $(this).data('index', i).css('z-index', '100'); });

    $pop.click(function(){
        var _index = $(this).data('index');
        $pop.each(function(i){
            if (i != _index) {
                $(this).css("z-index", "100").removeClass();
            } else {
                $(this).css("z-index", "9999");
                $(this).removeClass().delay(1).queue(function (a) {
                    $(this).addClass("animate pop");
                    a();
                    $(this).dequeue();
                });
            }
        });
    });
});