loading bar의 구현

Tags:

자카르타 프로젝트에서 펐습니다. ‘로딩중입니다’를 보여주는 테크닉.

http://www.jakartaproject.com/article/javascripttip/1111024946142

작업중인 동안 로딩바 나타내기!

Iframe을 사용하면 간단히 처리 됩니다.

 

우선 parent.html에서 process.html을 iframe으로 삽입 합니다.

그 후 parent.html에서 서브밋을 process.html로 보내면서 로딩바를 보여줍니다.

process.html이 모두 처리가 된 후 로딩바를 제거합니다

 

이러한 방식으로 unicorn의 파일 업로드가 구현되어 있습니다.

 

======================================================

parent.html

 

<script>
function window.onload() {
    load(false);
}

function load(bul) {
    if (bul)
        document.getElementById(‘loading’).style.display=’block’;
    else
        document.getElementById(‘loading’).style.display=’none’;
}

function process() {
    if (confirm(‘정말 작업 하시겠습니까?’)) {
        load(true);
        document.f.submit(); 
    }
}
</script>

<div id=loading style=’position:absolute;left:100;top:130;’>
<img SRC=’http://www.jakartaproject.com/img/skin/default/i_loading.gif’>
</div>

<form name=f method=post target=process_ action=process.html>
</form>

<table>
 <tr>
  <td align=center><input type=button name=btn value=작업시작 style=width:400 onclick=process()></td>
 </tr>
 <tr>
  <td><iframe name=process_ src=’about:blank’ width=400 height=200 frameborder=0 marginwidth=0 marginheight=0 topmargin=0 scrolling=yes></iframe></td>
 </tr>
</table>

 

 

=================================================================

process.html

jsp로 처리후 마지막에 다음 스크립트를 출력<br>
이 스크립트가 나오기 전까지 로딩중임이 표시됨..

<script>
   alert(‘작업 완료 되었습니다’);
   parent.load(false);
</script>

 

 
 
 
parent.html 872 Bytes
process.html 171 Bytes
 

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *