,
http://blog.naver.com/belladonnaf/50076332316


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 프로젝트로 작성되었습니다.

[출 처] jQuery를 이용한 로딩 중 이미지 표시(update)|작성자 마일드

'개발 > jQuery' 카테고리의 다른 글

jquery vticker (vertical news ticker) - 위로 올라가는 뉴스티커  (0) 2010.08.17
select (combo) box  (0) 2010.08.12
플러그인 만들기  (0) 2010.08.06
jQuery를 이용한 element 위치에 스크롤 됐을때 콘텐츠 출력하기?  (0) 2010.06.22
jQuery를 이용해 가시 영역의 이미지만 로딩하는 기법  (0) 2010.06.16
jQuery를 이용한 로딩 중 이미지 표시(update)  (0) 2010.06.16

+ Recent posts