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