Dieser Artikel teilt Ihnen hauptsächlich den einfachen Code zur Implementierung des Webseiten-Fortschrittsbalkens in JS mit. Ich hoffe, er kann Ihnen helfen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery实现简单网页进度条</title>
<style>
* {
margin: 0;
padding: 0;
}
/*大小和body一样,盖住全部内容*/
.loading {
width: 100%;
height: 100%;
background: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
/*图片和父容器大小一样*/
img {
width: 100%;
}
/*加载动画*/
.loading .pic {
width: 200px;
height: 100px;
background: url(img/07.gif) no-repeat center;
/* 大家可以去www.loading.io浏览一下，里面提供了很多进度条小动画 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<p class="loading">
<p class="pic"></p>
</p>
<!-- 页面加载完成后要展示的图片 -->
<img src="01.jpg" alt="">
<img src="02.jpg" alt="">
<img src="06.jpg" alt="">
</body>
<script>
/*
通过加载事件来完成网页加载事件
onreadystatechange:页面加载状态改变时的状态
document.readyState：返回当前文档的状态
1.uninitialized - 还未开始加载
2.loading - 载入中
3.interactive - 已加载， 文档与用户可以开始交互
4.complete - 载入完成
*/
document.onreadystatechange = function () {
if (document.readyState == "complete") { //判断状态
$(".loading").fadeOut();
}
}
</script>
</html>Verwandte Empfehlungen:
JS-Schreibbeispielmethode für den Fortschrittsbalken einer Webseite
Empfohlene Artikel zum Fortschrittsbalken einer Webseite
Ein einfaches Beispiel für den Fortschrittsbalken einer Javascript-Webseite
Das obige ist der detaillierte Inhalt vonJS implementiert eine einfache Codefreigabe für den Fortschrittsbalken von Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
