实现网页加载过程进度条

最新推荐文章于 2024-07-19 15:32:49 发布

crystal徐

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量1k

点赞数

分类专栏： html 文章标签： js 进度条实现

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

（慕课网学习记录）

*进度条下载网址：https://preloaders.net/

*首先在网页同目录下建立images文件夹，放入下载好的进度条文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<title>进度条</title>
<style>
.loading{width:100%;height:100%;position:fixed;left:0;top:0;z-index:100;background:#fff}
.loading .pic{width:64px;height:64px;background:url(images/4.gif);position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}
</style>
</head>
<body>
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" />
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/>
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/>
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" />
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/>
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/>
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg" />
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/>
<img src="http://p2.so.qhimgs1.com/t019de702e48fb0cb02.jpg"/>

<script>
$(function(){
	var loading='<div class="loading"><div class="pic"></div></div>';
	$("body").append(loading);
})
document.onreadystatechange=function(){
	
	console.log(document.readyState);
	if(document.readyState=="complete"){
		$(".loading").fadeOut();
	}
}
</script>
</body>
</html>