주 콘텐츠로 건너뛰기

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

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

자세히 알아보기

Lazy Loading 사용하기

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

1. 설정하기

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();
});
}
});
});
});

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