SBUx - OVERVIEW

Tutorials

1.9 Lazy 로딩하기

STEP 1. LoadIncludeClass 설정 사용

1. 컴포넌트 환경설정에 LoadIncludeClass를 설정합니다.

<script>
    var SBUxConfig = {
        Path : "/resources/SBUx/",  
        SBGrid : {
            Version2_5 : true
        },
        SBChart : {
            Version2_0 : true
        },
        LoadIncludeClass : 'lazyLoadClass'
    };
</script>

2. 우선 랜더링할 컴포넌트에만 lazyLoadClass를 설정합니다.

<sbux-input id="sbIdx1" name="sbName1" uitype="text"></sbux-input>
<sbux-input id="sbIdx2" name="sbName2" uitype="text" class="lazyLoadClass"></sbux-input>
<sbux-input id="sbIdx3" name="sbName3" uitype="text"></sbux-input>

3. render Method 를 사용하여 화면 로딩 후 특정 시점에서 사용하고자 하는 컴포넌트를 랜더링합니다.

<script>
    function LoadOthersCompoent(){
		SBUxMethod.render();
	}
</script>

STEP 2. LoadExcludeClass 설정 사용

1. 컴포넌트 환경설정에 LoadExcludeClass를 설정합니다.

<script>
    var SBUxConfig = {
        Path : "/resources/SBUx/",  
        SBGrid : {
            Version2_5 : true
        },
        SBChart : {
            Version2_0 : true
        },
        LoadExcludeClass : 'notLoadClass'
    };
</script>

2. 랜더링하지않을 컴포넌트에만 notLoadClass를 설정합니다.

<sbux-input id="sbIdx1" name="sbName1" uitype="text"></sbux-input>
<sbux-input id="sbIdx2" name="sbName2" uitype="text" class="notLoadClass"></sbux-input>
<sbux-input id="sbIdx3" name="sbName3" uitype="text"></sbux-input>

3. render Method 를 사용하여 화면 로딩 후 특정 시점에서 사용하고자 하는 컴포넌트를 랜더링합니다.

<script>
    function LoadOthersCompoent(){
		SBUxMethod.render();
	}
</script>

STEP 3. lazyloading 속성 사용 (Tabs)

1. tabs 컴포넌트에 lazyloading 속성을 추가합니다.

<sbux-tabs id="sbIdx1_1" name="sbTagNm1_1" uitype="normal" title-target-id-array="tab1_1_1^tab1_1_2" title-text-array="tab1^tab2" is-scrollable="false" lazyloading="true"></sbux-tabs>
<div class="tab-content">
    <div id="tab1_1_1">
        tab1 content
    </div>
    <div id="tab1_1_2">
        tab2 content
    </div>
</div>

STEP 4. lazyloading 속성 사용 (Carousel)

1. carousel 컴포넌트에 lazyloading 속성을 추가합니다.

<sbux-carousel id="sbIdx1_1" name="sbTagNm1_1" uitype="tag" lazyloading="true">
    <content-item><sbux-input id="couinput" name="couinput" uitype="text"></sbux-input></content-item>
    <content-item><sbux-datepicker id="coupicker" name="coupicker" uitype="inline"></sbux-datepicker></content-item>
    <content-item><sbux-button id="coubutton" name="coubutton" uitype="normal" text="버튼"></sbux-button></content-item>
</sbux-carousel>