Rev. 2.73

이 곳의 상단에 적용되어 있는 프로그레스 바입니다. 자바스크립트의 양이 많이지면서 CPU의 처리과정이 다소 길어짐에 따라 진행상황을 시각적으로 표시하기 위해 만들어 보았습니다. 이 처리과정 중에서도 아래의 스크립트는 이미지의 로딩현황만을 체크하여 진행상황을 표시하는 역할을 합니다. IE와 파이어폭스에서 정상작동하는 것을 확인하였습니다. 이 스크립트는 Prototype 프레임웍 기반으로 코딩되었습니다.

// Progress Bar
// Developer: FireJune(http://firejune.com)

var Progress = {
bar:function(value){
Element.setStyle('progress', {width:value+'px'});
Element.update('imgCnt', Math.ceil(100-((100/this.bSize)*value))+'%');
},
init:function(){
this.imgs = $$('IMG');
this.bSize = Element.getWidth('progress');
this.gSize = this.bSize/this.imgs.length;
this.loaded = 0;
for(n=0;n<this.imgs.length;n++) this.check(n);
},
draw:function(){
this.loaded++;
this.bar(Math.ceil(this.bSize-(this.gSize*this.loaded)));
if(this.imgs.length<=this.loaded)
setTimeout('Element.hide("progress");new Effect.Fade("progress_text");', 500);
},
check:function(n){
(this.imgs[n].complete)? this.draw():setTimeout('Progress.check('+n+')', 500);
}
}

// 사용하기
Event.observe(window. 'load', Progress.init);

// HTML 노드
<div id="progress_text">
processing...
<div id="imgCnt">0%</div>
</div>
<div id="progress"></div>

// 스타일시트
#progress {position:absolute; width:700px; height:144px; z-index:98; right:0;
border-left:2px solid #999; background:#fff}
#progress_text {position:absolute; font:bold 25px HY견고딕, Dotum;
color:#fff; right:260px; top:45px; z-index:99}

- 페이지 전체 이미지 수
- 그래프의 너비파악 및 계산
- 개개 이미지의 로딩완료 여부 파악
- 로딩이 완료되지 않은 이미지는 0.5초후 다시 파악
- 로딩 완료된 순서로 그래프 드로잉
- 이미지 로딩이 모두 완료되면 그래프 숨김

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar