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>
<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 이벤트 미지원으로 동작하지 않음(오류 발생은 없음)
*/
* ProgressBar.js - Progress bar에 대한 정의
* 호환성 : IE7, IE8, 파이어폭스3.0.4, 크롬 에서 정상동작
* Opera 브라우저에서는 onbeforeunload 이벤트 미지원으로 동작하지 않음(오류 발생은 없음)
*/
var progressbar =
new Object();
progressbar.enable = true; // 사용여부
progressbar.image = "/img/ProgressBar.gif"; // 사용할 이미지 파일
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);});
});
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 |