jQuery를 이용한 페이지 이동(로딩) 중 이미지 표시

Tistory에 있는 raintype's 블로그 운영시에 공개했던

jQuery를 이용한 로딩 중 이미지표시(update) 에 버그 발생에 따라

업데이트를 하여 공개 합니다.

기존에 변경한 모듈에서 발견된 버그는 로딩 이미지를 각 웹페이지에서

변경이 불가능하였던 부분으로 동작방법을 변경하여 처리하였습니다.

기존에는 ProgressBar.js를 웹페이지에 연결하면 무조건 로딩 이미지가

등록되게 하였습니다. 그리고 이미지 등록을 하지 않기 위해서는 별도의 세팅을 하도록 했습니다.

패치 버전에서는 반대로 로딩 이미지를 등록하기 위해서는 각 웹페이지에서 함수를 실행해야 하는

형태로 변경하였습니다.

먼저 ProgressBar.js 파일은 아래와 같습니다.

/* 
 * ProgressBar.js - Progress bar에 대한 정의
 * 호환성 : IE7, IE8, 파이어폭스3.0.4, 크롬 에서 정상동작
 *          Opera 브라우저에서는 onbeforeunload 이벤트 미지원으로 동작하지 않음(오류 발생은 없음)
 */

var progressBar = {
    image: "/Images/dbadmin/img/ProgressBar-1.gif", // 사용할 이미지 파일
    enable: function() {
        // 크롬과 사파리에서 beforeunload 이벤트가 실행되는 동안
        // 동적으로 생성된 img 엘리먼트가가 정상적으로 로딩되지 않아 미리 img 엘리먼트를 생성한다.
    $("body").append('<img id ="imgProgressbar" src="' + progressBar.image + '" alt="progressbar" />');
        $("#imgProgressbar").css("display", "none");
        // IE에서 애니메이션 gif가 멈춰있는 현상으로 인하여 setTimeout을 이용하여 Progressbar function 실행
        $(window).bind("beforeunload", function() { setTimeout("Progressbar()", 0); });
    }

};

/* Progress Bar 함수 */
function Progressbar() {
    $("#imgProgressbar").modal({
            overlayCss: { "background-color": "#000", "cursor": "wait" },
            containerCss: { "background-color": "#fff", "border": "0px solid #ccc" },
            close: false,
            closeHTML: ''
     });
}

각 웹페이지에서는 아래와 같이 설정을 하면 됩니다.

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="jquery.simplemodal-1.2.3.js"></script>
    <script type="text/javascript" src="ProgressBar.js"></script>

    <script type="text/javascript">
        $(function() {
            // progressBar 설정
            progressBar.image = "/Images/ProgressBar-1.gif";
            progressBar.enable();

    </script>

jQuery 기본 모듈과 simplemodal plugin을 연결하시고

ProgressBar.js 파일을 연결하신 후에 페이지 로딩 중 이미지를 사용하기 위해서는

progressBar.enable(); 을 실행하면 됩니다.

로딩 중 이미지를 변경하기 위해서는 progressBar.enable(); 실행전에

progressBar.image = "/Images/ProgressBar-1.gif"; 과 같이 이미지 파일 경로를

progressBar.image에 등록하면 됩니다.