주 콘텐츠로 건너뛰기

[모바일] Lazy Loading 또는 [더보기] 기능 적용하기

모바일 쇼핑몰의 이미지 로딩을 구현하는 방법은 두 가지가 있어요. 상품 상세 이미지 로딩을 Lazy Lading 또는 [더보기] 형태로 구현하는 방법을 알아보도록 해요.
2개 기능은 동시 사용할 수 없으며 각 쇼핑몰에 맞게 운영하면 됩니다.

자세히 알아보기

Lazy Loading 사용하기

Lazy Loading 이란?
사용자 화면에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤하면서 이미지에 가까워지면 로딩되는 방식입니다.

1. 설정하기

  • [관리자] 쇼핑몰 설정 > 사이트 설정 으로 이동해 주세요.
  • 쇼핑몰 환경설정 > Mobile(탭) > 기본설정(탭) > 사용설정 > 상품 상세 이미지 로딩 속도 개선' 설정을 '사용함'으로 변경해 주세요.

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

상품상세 화면에서 <div module="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>

 

 

Info

기존 더보기 기능을 사용 중인 쇼핑몰의 경우 '사용함' 설정시 더보기 기능이 비활성화되며,
'사용 안 함' 설정 시 다시 활성화 됩니다.

 

[더보기] 방식 사용하기

1. 설정하기

Lazy Loading 과 [더보기]는 함께 사용할 수 없기 때문에 쇼핑몰 관리자에서 '모바일 쇼핑몰 > 모바일 환경설정 > 기본설정(탭) > 사용설정 > 상품 상세 이미지 로딩 속도 개선' 설정을 "사용안함 "으로 변경해 주세요.
사용자 화면에 보이는 이미지만 로딩하고 다른 이미지들은 사용자가 스크롤하면서 이미지에 가까워지면 로딩되는 방식입니다.

2. HTML 소스 추가하기

상품 상세 화면에서 <div module="product_additional ">의 모듈을 찾아 더보기 모듈 적용 후 아래 소스와 같이 수정해 주세요.

<!-- 더보기모듈 적용전 소스 -->
<div module="product_additional ">
<!--@css(/css/module/product/additional.css)-->
<!--@css(/css/module/product/additional_animation.css)-->

<div id="prdDetail ">
<div class="button" id="prdDetailBtn">
<a href="/product/zoom.html?product_no={$product_no}" class="btnNormal ">원본보기 <span class="ico "></span></a>
</div>
<div id="prdDetailContent">{$product_detail}</div>
</div>
<!-- //더보기모듈 적용전 소스 -->

<!-- 더보기모듈 적용후 소스 -->
<div id="prdDetail" module="product_additional">
<!--@css(/css/module/product/additional.css)-->
<!--@js(/js/module/product/additional.js)-->
<!--@js(/js/module/product/additional_animation.js)-->
<div class="button" id="prdDetailBtn">
<a href="/product/zoom.html?product_no={$product_no}" class="btnNormal">원본보기 <span class="ico"></span></a>
</div>
<div id="prdDetailContent" class="prdDetailView">{$product_detail}</div>
<div class="btnMore" id="btnMore">
<a href="#none">
더보기<span class="icoMore"></span>
</a>
</div>
</div>
<!-- //더보기모듈 적용후 소스 -->

 

3. 자바 스크립트 소스 추가하기

위 html을 적용한 후, 해당 javascript 파일에 아무 내용이 없다면 해당 소스는 정상 작동하지 않아요.
하단 소스를 각각 추가해 주세요.

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

/**

* 모바일 상품상세 더보기

* @package app/Shop

* @subpackage Front/Disp/Product

* @since 2014. 5. 12.

* @version 1.0

*/

 

 

$(function() {

var $DetailMore = {

/*

* current module name

*/

sModule : 'xans-product-additional',

 

/*

* active div

*/

iActive : 0,

 

/**

* module

*/

$module : null,

 

/**

* detail

*/

$detail : null,

 

/**

* more

*/

$more : null,

 

/**

* real height

*/

realHeight : 0,

 

/**

* fake height

*/

fakeHeight : 0,

 

/**

* init

*/

init : function() {

// validate

if (this.validate === false) return;

 

// set object

this.setObject();

 

// set detail height

this.setDetailHeight();

 

// set more

this.setMore();

},

 

 

 

/**

* set event

*/

setMore : function() {

 

if (this.realHeight <= this.fakeHeight) {

this.$more.remove();

} else {

this.$more.unbind().bind('click', function() { if (this.validate === false) return; $DetailMore.load(); });

}

},

 

/**

* set detail height

*/

setDetailHeight : function() {

this.$detail.css({'max-height' : parseInt($(window).height()*4) + 'px', overflow : 'hidden'});

this.fakeHeight = this.$detail.height();

},

 

/**

* validate

*/

validate : function() {

 

if (mobileWeb === false) return false;

},

 

/**

* set object

*/

setObject : function(){

 

try {

// current module class

var sActiveProduct = this.iActive > 0 ? '.' + this.sModule + '-' + this.iActive : '.' + this.sModule;

// set module

this.$module = $(sActiveProduct);

 

// set detail

this.$detail = this.$module.find('div.prdDetailView');

 

// set more

this.$more = this.$module.find('div.moreBtn');

 

// set real height

this.realHeight = this.$detail.height();

} catch(e) { console.log(e); }

},

 

/**

* load detail

*/

load : function() {

this.$detail.css({'max-height' : 'none'});

this.$more.remove();

}

};

 

$DetailMore.init();

});

 

<!--@js(/js/module/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();
});
}
});
});
});

이 페이지가 도움이 되었나요?
현재 콘텐츠