스와이퍼 캐러셀(swiper carousel)뒤로가기 하면 멈춤 현상👉🏻feat.bfcache

현재 회사에서 스와이퍼 캐러셀 많이 사용 하고 있다.
그런데 만약 캐러셀에 링크를 넣는다거나 다른 이미지에 링크를 걸고 다른페이지 이동후 원래 페이지로 돌아오면 캐러셀이 멈추는 현상이 있는것!!!! (모바일 크롬,사파리 등)
이것땜에 여러가지 방법을 시도하다가 이유를 찾아 나름의 방법을 찾았다..!

 

일단 멈추는 근본적인 원인은 bfcache(역캐시) 때문이었다
bfcache 는 접속한 브라우저 에서 뒤로가기/앞으로가기를 했을 경우 이전페이지를 캐싱하여 페이지로드를 따로 하지 않아 기존의 js를 그대로 보존하고 있는걸 말한다. 브라우저 자체를 아예 닫을때 까지 보존된다. 이렇게 되면 응답 속도가 빨라 사용자 경험이 좋아진다.
내폰이 아이폰이라 안드로이드는 확인 못해봤는데 ios에서 bfcache를 사용중이라 한다

 

그래서 캐러셀이 있는 페이지 내에서 링크를 클릭했을때 다른페이지 갔다가 뒤로가기 클릭 후 다시 본 페이지로 진입하면 캐러셀이 멈췄던것....
근데 왜 그 전 페이지에서 캐러셀이 잘 굴러가고 있는데 멈추는지는..이것이 bfcache로 인해 멈추는지는,,, 확신이 아직 안선다;
bfcache 로 인한 오류 해결법으로 이 문제를 해결했으니 이 오류때문 인걸로,,,ㅎ

$(function(){
    var carou_slide1;

	function carouSlide(){
		carou_slide1 = new Swiper('.carousel__banner1', {
			slidesPerView: 'auto',
			effect:'slide',
			speed:3000,
			loop: true,
			autoplay: {
				delay: 1,
				disableOnInteraction: false		
			},
			allowTouchMove:false,
			observer: true,
			observeSlideChildren: true,
			observeParents: true,
		});	
	}

	carouSlide()
	
	$(window).bind("pageshow", function(event) {
		if (event.originalEvent.persisted) {
		    carou_slide1.destroy() //기존 스와이퍼 캐러셀 제거
			carouSlide() //재호출
		}
	});	
})

 

carouSlide()를 먼저 함수로 호출하면 본 브라우저에서 캐러셀이 활성화 된다. 그리고 pageshow 이벤트를 걸어준다.
pageshow 이벤트는 뒤로가기/앞으로가기 해도 항상 발생하는 이벤트이다. event.persisted 속성을 통해 BFCache를 통해 호출되었으면 true를 반환한다. 이 조건문에서 carouSlide()를 재호출하면 캐러셀이 멈추지 않고 정상 작동된다.

 

js 버전

let carou_slide1

function carouSlide(){
    carou_slide1 = new Swiper('.carousel__banner1', {
        slidesPerView: 'auto',
        effect:'slide',
        speed:3000,
        loop: true,
        autoplay: {
            delay: 1,
            disableOnInteraction: false		
        },
        allowTouchMove:false,
        observer: true,
        observeSlideChildren: true,
        observeParents: true,
    })
}

carouSlide()

window.onpageshow = function(event) {
    if (event.persisted) {
        carou_slide1.destroy()
        carouSlide()
    }
};

 

 

 

출처:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching

Using Firefox 1.5 caching - Mozilla | MDN

https://stackoverflow.com/questions/11979156/mobile-safari-back-button

Mobile Safari back button