진행률 표시줄의 HTML 구현

그림 스타일을 설정하고 진행률 표시줄 그림을 Images/ 디렉터리에 두고 이름을 loading.gif로 지정합니다. 그 중 gif 로딩 이미지는 아래 그림과 같이 https://icons8.com/preloaders/ 에서 생성할 수 있습니다.

이미지가 화면 중앙에 오도록 헤드에 스타일 파일을 추가합니다.

<style>
    .loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#ffffff;opacity:0.5;}
    .loading .pic{width:64px;height:64px;background:url(images/loading.gif);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>

이미지를 표시하려면 본문에 div 태그를 추가하세요.

<div class="loading">
    <div class="pic"></div>
</div>

document.onreadystatechange 이벤트의 document.readyState를 통해 현재 로딩 상태를 확인합니다.

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
    document.onreadystatechange=function(){
        if(document.readyState=="complete"){
            $(".loading").fadeOut();
        }
    }
</script>

그 중 document.readyState에는 4가지 상태가 있습니다.

초기화되지 않은	로드가 시작되지 않았습니다.
로드 중	로드 중
인터렉티브	문서가 로드되지만 이미지 및 스타일과 같은 리소스는 여전히 로드 중일 수 있습니다. 이 시점에서 문서는 이미 사용자와 상호 작용할 수 있습니다.
완벽한	로딩 완료