웹을 탐색할 때 데이터가 로드될 때 나타나는 LOADING 프롬프트를 자주 볼 수 있습니다. 실제로 이 함수의 원리는 매우 간단합니다. 즉, 현재 페이지를 DIV로 덮고, 덮힌 DIV 레이어에 Loading을 표시하는 것입니다. 이제 구현해 보겠습니다.
1.현재 페이지:
다음과 같이 코드 코드를 복사합니다.
<div><a href="#" onclick="showLoading()">로드 중</a></div>
2. 마스크 레이어:
다음과 같이 코드 코드를 복사합니다.
<div id="오버"></div>
3.디스플레이 레이어 로딩:
다음과 같이 코드 코드를 복사합니다.
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
전체 코드:
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<제목></제목>
<스타일 유형="텍스트/css">
.현재 {
글꼴 크기: 20px;
}
.위에 {
디스플레이: 없음;
위치: 절대;
상단: 0;
왼쪽: 0;
너비: 100%;
높이: 100%;
배경색: #f5f5f5;
불투명도:0.5;
Z-색인: 1000;
}
.레이아웃 {
디스플레이: 없음;
위치: 절대;
최고: 40%;
왼쪽: 40%;
너비: 20%;
높이: 20%;
Z-색인: 1001;
텍스트 정렬:가운데;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
함수 showLoading()
{
document.getElementById("over").style.display = "차단";
document.getElementById("layout").style.display = "블록";
}
</script>
</head>
<본문>
<div><a href="#" onclick="showLoading()">로드 중</a></div>
<div id="오버"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</body>
</html>
최종 효과:
인터넷에서 또 다른 구현 방법을 본 적이 있는데, JS를 사용하여 html 태그의 값을 지속적으로 변경하여 프롬프트 로딩 효과를 얻는다는 아이디어였습니다. 코드는 다음과 같습니다:
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<제목></제목>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<스타일 유형="텍스트/css">
#tb {
너비: 100%;
높이: 100%;
줄 높이: 10px;
}
#tb tr td {
텍스트 정렬: 중앙;
}
.진행 표시줄 {
글꼴 모음: Arial;
글꼴 두께: 굵게;
색상: 회색;
배경색: 흰색;
패딩: 0px;
테두리 스타일: 없음;
}
.퍼센트 {
글꼴 모음: Arial;
색상: 회색;
텍스트 정렬: 중앙;
테두리 너비: 중간;
테두리 스타일: 없음;
}
</style>
<스크립트 유형="텍스트/자바스크립트">
var 바 = 0;
var 단계 = "||";
/*
*첫 번째 방법은 다음과 같습니다: $(document).ready(function(){.....});
*/
//$(함수 () {
// 진전();
//});
/*
*두 번째 방법
*/
//window.onload = 함수() {
// 진전();
//}
/*
*세 번째 방법은 $(document).ready(function(){.....});
*/
(기능 () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]() };
var d = 문서;
d. 준비 = 함수(f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) 반환;
만약 (즉)
(기능 () {
try { d.documentElement.doScroll('left'); run() }
catch (err) { setTimeout(arguments.callee, 0) }
})();
그렇지 않으면 (주)
var t = setInterval(함수 () {
if (/^(loaded|complete)$/.test(d.readyState))
ClearInterval(t), run();
}, 0);
};
})();
document.ready(함수 () {
진전();
});
함수 진행() {
바 = 바 + 2;
단계 = 단계 + "||";
document.getElementById("percent").value = bar + "%";
document.getElementById("progressbar").value = 단계;
if (bar <= 98) {
setTimeout("진행()", 100);
}
}
</script>
</head>
<본문>
<테이블 ID="tb">
<tr>
<TD>
<input type="text" size="50" id="percent" /></td>
</tr>
<tr>
<TD>
<input type="text" size="50" id="progressbar" /></td>
</tr>
</table>
</body>
</html>
최종 효과: