在网上找资料的时候，看到网上有图片加载进度的效果，手痒就自己也写了一个。
图片加载完后，隐藏loading效果。
想看加载效果，请ctrel+F5强制刷新或者清理缓存。
效果预览：
0%
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML5+javascript实现图片加载进度动画效果</title>
<style>
.loading {width:200px;height:200px;position:relative;margin:50px auto;border:1px solid #f90;border-radius:%;}
.dot {width:%;;height:%;animation:rond .8s infinite;-webkit-animation:rond .8s infinite;}
.dot:after {width:10px;height:10px;position:absolute;top:-5px;left:90px;content:"";display:table;background-color:#f50;border-radius:%;}
.num {width:%;height:%;position:absolute;top:;left:;line-height:200px;text-align:center;font-size:20px;color:#f60;}
@keyframes rond {
% {transform:rotate(0deg);}
% {transform:rotate(360deg);}
}
@-webkit-keyframes rond {
% {-webkit-transform:rotate(0deg);}
% {-webkit-transform:rotate(360deg);}
} .photo {width:860px;margin: auto;display:none;text-align:center;}
.photo img {width:200px;margin: 5px;border:1px solid #ddd;border-radius:5px;}
</style>
</head>
<body> <div class="loading">
<div class="dot"></div>
<div class="num">%</div>
</div> <div class="photo"></div> <script> var loading = document.querySelector(".loading"),
num = document.querySelector(".num"),
photo = document.querySelector(".photo"),
imgs = [
"http://img4.cache.netease.com/photo/0001/2015-03-16/AKQU47JM00AP0001.jpg",
"http://img3.cache.netease.com/photo/0001/2015-03-16/AKQU47OJ00AP0001.jpg",
"http://img3.cache.netease.com/photo/0001/2015-03-16/AKQU482200AP0001.jpg",
"http://img6.cache.netease.com/photo/0001/2015-03-16/AKQU486800AP0001.jpg",
"http://img5.cache.netease.com/photo/0001/2015-03-16/AKQU48C000AP0001.jpg",
"http://img1.gtimg.com/12/1206/120657/12065709_1200x1000_0.jpg",
"http://img1.gtimg.com/12/1206/120657/12065712_1200x1000_0.jpg",
"http://img1.gtimg.com/12/1206/120657/12065713_1200x1000_0.jpg"
],
len = imgs.length; for (var i=; i<len; i++){
var img = new Image();
img.src = imgs[i];
img.onload = function () {
i--;
num.innerHTML = ((len-i) * / len) + "%";
photo.innerHTML += "<img src='"+imgs[i]+"'>";
if (i == ){
photo.style.display = "block";
loading.style.display = "none";
}
};
} </script>
</body>
</html>
判断页面加载完
document.onreadystatechange = function () {
if(document.readyState == "complete") {
alert("OK!");
}
}