onbeforeunload 를 활용하여 페이지 이동 시 프로그레스바, 로딩바 생성

 

onbeforeunload 를 활용하여 페이지 이동 시 프로그레스바 생성

 

 

이전 포스팅에서 프로그래바(로딩바) 플러그인에 대해서 작성했다.

 

프로그레스바 플러그인 포스팅으로 이동

 

이번 포스팅은 이전 포스팅에서 작성한 프로그래스바 플러그인을 활용하여 페이지를 이동할 때마다 보여주려고 한다.

 

방법에는 여러가지가 있어 보인다.

 

1. submit, href, replace 등 이벤트가 실행될 때마다 프로그래스바 플러그인 실행

2. 페이지마다 script나 body에 onbeforeunload 이벤트를 활용해서 프로그래스바 플러그인 실행

3. 공통 js 파일에 onbeforeunload 이벤트를 활용하여 프로그래스바 플러그인 실행 방법

등등등...

 

 

 

저 중에서 필자가 선택한 방법은 3번째 방법이다.

 

상황에 맞게 사용하면 된다.

 

필자의 경우 모든 페이지에서 페이지 이동이 일어날 경우에 프로그래바를 생성해야 했다.

 

 

window.onbeforeunload 이벤트   onunload 보다 먼저 발생한다. 새로고침, 페이지 이동 등 페이지를 벗어나기 전에 무조건 실행된다. 문자열을 return 하면 confirm 창이 생성되고 아무것도 return 하지 않으면 아무일도 일어나지 않는다.

 

 

 

선행작업

jquery import

이전 포스팅의 프로그래스바 플러그인 import

 

 

공통 js 파일에 다음 내용 추가

var spinner;
jQuery(function(){
    spinner = new Spinner().spin().el;
    jQuery(document.body).append(spinner);
    jQuery(spinner).css('display','none');
});
 
window.onbeforeunload = function(e){
    if(e != null && e != undefined){
        jQuery(spinner).css('display','');
    }
};

1# : 프로그래스바 태그 객체 변수

2# : jquery ready 함수

3# : 프로그래스바 생성

4# : body 에 프로그래스바 태그 추가

5# : 프로그래스바 숨김

8# : onbeforeunload 이벤트 생성

10# : 프로그래스바 표시