모바일 쇼핑몰의 이미지 로딩을 구현하는 방법은 두 가지가 있어요. 상품 상세 이미지 로딩을 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();
});
}
});
});
});