HTML加载页面

最新推荐文章于 2024-01-09 11:11:29 发布

於小夜

最新推荐文章于 2024-01-09 11:11:29 发布

阅读量1.7k

点赞数

分类专栏： HTML JS CSS 文章标签： html

本文链接：https://blog.csdn.net/sunzequan888/article/details/125810777

版权

JS 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

在HTML嵌入文件过多的时候，就会出现卡顿的现象，完全加载好之前会出现白屏或者黑屏，特别不好看。所以，需要一个加载页面来弥补这个漏洞。

废话不多说，直接上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加载页面</title>
		<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- 也可以引用自己下载的jquery库 -->
		<style>
			.loading {
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				background-color: white;
				z-index: 10000;
			}
		</style>
		<script type="text/javascript">
			document.onreadystatechange = function() {
				if (document.readyState == "complete") {
					setTimeout(function() {
						$(".loading").fadeOut(500);
					}, 500);
				}
			}
		</script>
	</head>
	<body>
		<div class="loading">
			<!-- 这里是自由发挥的空间，可以用canvas或者img -->
		</div>
		<!-- 正文内容 -->
	</body>
</html>