<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<title></title>
<style>
.gifImg{ width: 100%; height: 100vh; }
.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{width: 50px;height: 50px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;}
.loading .pic i{display: block;float: left;width: 6px;height: 50px;background-color: #399;margin: 0 2px;transform: scaleY(.4);animation: load 1.2s infinite;
}
.loading .pic i:nth-child(1){}
.loading .pic i:nth-child(2){animation-delay: .1s; }
.loading .pic i:nth-child(3){animation-delay: .2s;}
.loading .pic i:nth-child(4){animation-delay: .3s;}
.loading .pic i:nth-child(5){animation-delay: .4s;}
@keyframes load{
0%,40%,100%{transform: scaleY(.4);}
20%{transform: scaleY(1);}
}
*{ margin:0; padding: 0;}
.loading{width: 100%;height: 100%;position: fixed;top:0;left: 0;z-index: 100;background-color: #fff;}
.loading .pic{/*width: 100px;*/height: 100px;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;font-size: 30px;text-align: center;line-height: 100px;}
.loading .pic span{display: block;width: 80px;height: 80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;box-shadow: 0 3px 0 #666;animation: rotate 1s infinite linear;-webkit-animation: rotate 1s infinite linear;
}
@-webkit-keyframes rotate{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
@keyframes rotate{
100%{transform: rotate(360deg);}
}
</style>
</head>
<body>
<div id="gif">
<div class="loading">
<div class="pic">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<img class="gifImg" src="http://111.132.5.8:8088/66.gif" alt=""/>
</div>
</body>
</html>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
if(document.readyState=="complete"){//complete加载完成
$(".loading").fadeOut();
}
}
$(function () {
var img = $(".gifImg");//首先获取所有的Img对象
var num = 0;//定义一个变量，赋值给b标签用
img.each(function(i){//遍历获取到的所有img
var oImg = new Image();//new一个新对象
oImg.onload = function(){//使用onload方法，在加载完成后执行
oImg.onload = null;//首先清除掉缓存
num++;//每次加载的过程中num++，即执行次数
$(".loading b").html(parseInt(num/$("img").size()*100)+"%");//改变b标签的内容，用num除以img的个数，再乘以100，再取整，这就是加载的百分数
if(num >= i){
$(".loading").fadeOut();//当num的值大于等于个数时隐藏
setInterval(function(){
$("#gif").fadeOut();//3秒之后影藏
},3500)
}
}
oImg.src = img[i].src;//预加载，先指定一个img.src，当onload成功以后可以将数据指定到某一个元素或者图片上，或者返回一个结果
})
})
</script>GIF加载完成后显示
算法云栖客
• 阅读
1205
点赞
收藏
