자카르타 프로젝트에서 펐습니다. ‘로딩중입니다’를 보여주는 테크닉.
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
Leave a Reply