js - 페이지 이동 후 슬라이드 이미지가 안 움직이는 이유 – 이미 로드된 JS의 한계와 해결

- 문제

modoo.js 스크립트가 이미 로드 된 상태에서 다른 페이지로 링크 이동 시 스크립트가 다시 로드 되지 않아 메인페이지에 있던 슬라이드 블럭이 슬라이드 되지 않는 문제 

 

- 해결과정

1. modoo.js 에서 함수 호출

이미 스크립트가 로드 된 상태에서 페이지를 넘어왔기 때문에 스크립트가 실행되지 않는 문제가 있어서 실패.

 

2. modoo.js 에서 html 요소 변경 감지 하는 MutationObserver 함수 사용 

window.addEventListener('load', function() {

    const targetNode = document.querySelector('.dsgn-body');
    console.log(targetNode);
    if (targetNode) {
        const observer = new MutationObserver((mutationsList, observerInstance) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    console.log('✅ 첫 감지됨: Swiper 초기화');
                    const swiperEl = document.querySelector('.swiper-container.swiper-initialized');  // Swiper 관련 요소
                    if (swiperEl) {
                        new initSwiper();
                        observerInstance.disconnect();
                    } else {
                        console.log('아직 Swiper 요소 없음, 다시 대기');
                    }
                    break;
                }
                
            }
        });
    
        observer.observe(targetNode, { childList: true, subtree: true });
    } else {
        console.warn('⚠️ 감지할 대상이 존재하지 않습니다.');
    }

});

 

되긴 하는데 성능상 딱히 좋아 보이진 않았음 예를들어 example.com/A에 있다가 슬라이드가 있는 홈 화면으로 오는 경우 A페이지던 B페이지던 modoo.js 를 무조건 타니까 어디서든 이벤트 걸어두는 부분이 딱히 좋진 않았음.

 

3. 편집모드 해당 블럭 javascript 추가.

해당 블럭이 페이지에서 그려질때 js 실행되게끔 하는 방법을 뒤늦게 알았음

var userEL18960775Slide = function(){
    setTimeout(function(){
        initSwiper();
    },1000);
}
$(function(){
    userEL18960775Slide();
});

$(window).on('load',function(){
    userEL18960775Slide();
});

 

근데 settimeout 은 1초뒤에 실행시키는거라 조금 이상했다. 이상한 이미지가 보이다가 리셋되는 화면 보는 느낌

 

아래와 같이 해결

 

var swiperInitialized = false;

function tryInitSwiper() {
    if (!swiperInitialized && $('.swiper-container').length) {
        initSwiper();
        swiperInitialized = true;
        console.log(' Swiper 초기화 완료');
    } else if (!swiperInitialized) {
        console.log(' Swiper 아직 없음, 다시 시도');
        requestAnimationFrame(tryInitSwiper);
    }
}

$(function() {
  console.log('test1');
    tryInitSwiper();
});

 

이제 다른 페이지에 있다 메인 가도 자동으로 슬라이드 된다