페이지를 열 때 로딩 중 표시하기
2017.12.06 17:48 Edit
1. 먼저 아래와 같은 자바 스크립트를 <head>와 </head> 사이에 넣어줍니다.
<script language=javascript>
n = document.layers
ie = document.all
function hide() {
if (ie || n) {
if (n) document.Load.visibility = "hidden"
else Load.style.visibility = "hidden"
}
}
</script>
2. 다음으로 <body> 태그에 onload="hide()"를 추가시켜줍니다. 아래처럼 되겠죠.
<body text=black bgcolor=white onload="hide()">
3. <body> 바로 아래에 아래 스크립트를 넣습니다.
<script language=javascript>
if(ie || n) document.write('<div id="Load" style="position:absolute;width:100%;height:100%;top:0;left:0;background-color:#ffffff;z-index:5">페이지 로딩중 보여줄 내용</div>')
</script>
결국 이것들을 모아보면 아래처럼 됩니다.
<html>
<head>
<title>::: 타이틀 :::</title>
<script language=javascript>
n = document.layers
ie = document.all
function hide() {
if (ie || n) {
if (n) document.Load.visibility = "hidden"
else Load.style.visibility = "hidden"
}
}
</script>
</head>
<body onload="hide()" bgcolor='white' text='black'>
<script language=javascript>
if(ie || n) document.write('<div id="Load" style="position:absolute;width:100%;height:100%;top:0;left:0;background-color:#ffffff;z-index:5">로딩중입니다 잠시만 기다려 주세요</div>')
</script>
본래 문서
</body>
</html>
내용이 적을 경우 순식간에 나타났다 사라집니다
---------------------------------------------------------------------------------------------------------------------------------
위 내용은 제가 처음 html 관련 공부를 하면서 수집했던 내용이여서 익스플로러 구버전(IE6 이하)에서만 작동합니다.
jQuery 버전으로 수정하여 업로드 합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Contents Loiding......</title>
<style type="text/css">
.loading {display:none; position:absolute; top:-4px; left:0; z-index:99; width:100%; height:100%; background:rgba(0, 0, 0, 0.5);}
.loading strong {display:block; position:relative; top:50%; margin:-75px auto 0 auto; width:200px; height:50px; padding:0 30px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-sizing:border-box;
background:#fff;
color:#000; font-size:16px; line-height:50px; text-align:center;
}
</style>
</head>
<body>
<div>
<h1>Loading</h1>
<iframe src="http://www.rainstory.net" width="100%" height="600px"></iframe>
</div>
<div class="loading">
<strong>Loading.......</strong>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.loading').show();
});
$(window).on('load', function() {
$('.loading').hide();
});
</script>
</body>
</html>
간단하게 페이지가 로딩 전에는 Loading 표시가 보여지고 컨텐츠 전체 로드 후 Loading 표시가 사라지게 하였습니다.
페이지 로드 과정을 위해서 이 홈페이지를 아이프레임을 걸어 둔 것이니 환경에 맞춰 수정하시면 됩니다.
jQuery 버전과 css도 환경에 맞춰 사용하시면 됩니다.
- Tag :
- loading , 피드백도 loading , 죄송합니다
Powered by Textyle
Design & UI Develop By The RaiN Story
2017.06.26 10:14
2017.09.28 14:47
2017.12.06 17:53
수정하였습니다.
답변이 늦어 죄송합니다.