<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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/loading.gif);
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
</style>
<script src="http://localhost/jquery-3.2.1.min.js"></script>
<script>
document.onreadystatechange=function(){
if(document.readyState=="complete"){//加载完成
$(".loading").fadeOut();
}
}
</script>
</head>
<body>
<div class="loading">
<div class="pic">
</div>
</div>
<img src="http://p0.so.qhimgs1.com/t011fdff1cc0c3b5ddc.jpg"/>
<img src="http://p1.so.qhimgs1.com/t01a7de1625f9c79011.jpg"/>
<img src="http://p2.so.qhmsg.com/t0152d7e8bb9f3f79c7.jpg"/>
<img src="http://p3.so.qhmsg.com/t017007538171c7e6a8.jpg"/>
<img src="http://p2.so.qhimgs1.com/t01279fce5fe1f2724e.jpg"/>
<img src="http://p1.so.qhimgs1.com/t01d184559fd4583b51.jpg"/>
</body>
</html>
jquery通过加载状态事件制作进度条
最新推荐文章于 2022-11-26 15:18:48 发布
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
