<pre><code class="language-javascript">function init(){
    showDemo();
    awesome();
    tryNow();
}

const img = gsap.utils.toArray('img');
const loader = document.querySelector('.loader--text');

const progressObj = {
    value: 0
};

// 초기 상태 명확히 설정
gsap.set(progressObj, { value: 0 });

if (loader) {
    loader.textContent = '0%';
}

const updateProgress = (instance) => {
    const targetProgress = Math.round(instance.progressedCount * 100 / img.length);

    gsap.to(progressObj, {
        value: targetProgress,
        duration: 0.4,
        ease: 'power1.out',
        overwrite: true,
        onUpdate: function() {
            loader.textContent = `${Math.round(progressObj.value)}%`;
        }
    });
}

imagesLoaded(img)
.on('progress', updateProgress)
.on('always', function(){
    gsap.to(progressObj, {
        value: 100,
        duration: 0.5,
        ease: 'power1.out',
        overwrite: true,
        onUpdate: function() {
            loader.textContent = `${Math.round(progressObj.value)}%`;
        },
        onComplete: function() {
            init();
        }
    });
})</code></pre><p style="text-align: left">위와 같이 수정했더니 0에서 100으로 순차적으로 로딩되는 것을 발견했습니다. 강사님의 코드에서는 왜 순차적으로 숫자가 변하지 않는걸까요?? </p>

imagesLoaded에 관한 질문

<p>Format on Save를 체크했다가 해제하고 저장을 다시 한 번 해봤더니 해결되었습니다;; 감사합니다!</p>

JJJ

Posts