taeyo 님이 jQuery를 이용하여 만든 게시판을 잠시 살펴 보다
로딩 중 이미지 표시하는 부분을 수정하였습니다.

taeyo 님은 로딩 중 이미지를 modal plugin에 담는 간단한 방법을 이용하셨더군요
저는 중앙 배치하기 위해 좌표값 계산하고 버튼 클릭 못하게 버튼 비활성화하고... 막 이랬는데 ㅠㅠ

그래서 소스를 수정하였습니다.
일단 웹문서(HTML or ASPX)에서는 simplemodal plugin만 추가하면 됩니다.
simplemodal pulin은 다음과 같습니다.
http://www.ericmmartin.com/simplemodal/ 

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


스 크립트 파일은 다음과 같습니다.
이전에 작성했던 스크립트에 비하여 정말 많은 부분이 제거 되었습니다.
$("#imgProgressbar").modal() 명령하나로 거의 대 부분의 문제가 해결 되었습니다.

/*
 * ProgressBar.js - Progress bar에 대한 정의
 * 호환성 : IE7, IE8, 파이어폭스3.0.4, 크롬 에서 정상동작
 *          Opera 브라우저에서는 onbeforeunload 이벤트 미지원으로 동작하지 않음(오류 발생은 없음)
 */
var progressbar = new Object();
progressbar.enable = true; // 사용여부
progressbar.image = "/img/ProgressBar.gif"; // 사용할 이미지 파일
/* Progress Bar 함수 */
function Progressbar() {
    if (progressbar.enable) {
        $("#imgProgressbar").modal({
            overlayCss: { "background-color": "#000", "cursor": "wait" },
            containerCss: { "background-color": "#fff", "border": "0px solid #ccc" },
            close: false,
            closeHTML: ''
        });
    }
}
   
$(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);});
});


자세한 사항은 첨부파일을 확인하세요
첨부 파일은 VS2008 프로젝트로 작성되었습니다.

+ Recent posts