<!DOCTYPE HTML><html><head> <meta charset = "utf-8"> <title>loading</title> <script type="text/css" src="src/spinner.css"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type ="text/css"> *{ padding:0; margin:0; } .page{ background-color: lightblue; height: auto; } img{ width: 100%; height:100%; } .loading{ position: fixed; width: 100%; height: 100%; top:0; left: 0; background-color: #fff; z-index:10; } .loading .pic{ position:inherit; width: 100px; height: 100px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 25px; line-height: 100px; text-align: center; } .loading .pic span{ position: absolute; top: 10px; left: 10px; height: 80px; width: 80px; /*background-color:gray;*/ border-radius: 50%; box-shadow: 0 3px #666; animation: rotate 1s infinite linear; -webkit-animation: rotate 1s infinite linear; } @keyframes rotate{ from {-webkit-transform: rotate(0deg)} to {-webkit-transform: rotate(360deg)} } @-webkit-keyframes rotate{ from {transform: rotate(0deg)} to {transform: rotate(360deg)} } </style> <script> $(function(){ var img = $("img"); var num = 0; img.each(function(i){ console.log("i:"+i); var oImg = new Image(); oImg.onload = function(){ oImg.onload=null; console.log("num:"+num); num++; $(".loading b").html(parseInt(num/img.size()*100)+"%"); console.log(parseInt(num/img.size()*100)+"%"); console.log("比较num:"+num+" i:"+i); if(num==i){ $(".loading").fadeOut(); } }; oImg.src = img[i].src; }); }) </script></head><body class="page"> <div class="loading"> <div class="pic"> <span> </span> <b>0%</b> </div> </div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013486&di=1e4fb933f5a0cdf29027846b7bb2ef87&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0142f759af7c3ea8012028a922928a.JPG%403000w_1l_2o_100sh.jpg "> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366080417&di=75bbca7a79b44f5ef71ed2290a866238&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D751435233%2C2123029106%26fm%3D214%26gp%3D0.jpg"> <img src="http://p.ananas.chaoxing.com/star3/origin/54758345a310e0448134ae6d.png "> <img src="http://pic.90sjimg.com/design/01/24/80/47/59107578095e7.png"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542960732&di=212aaefb5f9bd823df223318898a4f39&imgtype=jpg&er=1&src=http%3A%2F%2Fconnect-cdn-china2.unity.com%2Fp%2Fimages%2Fc197dc39-f62d-4b42-acb1-2f13d55c0272_Polyverse_Skies_4K___Sky_02.jpg"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013486&di=f4df9c0a4b47af0a920ae385df4bba5b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0313731592180a1b5b3086ed4baaa5c.jpg"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013485&di=49a09d9c97b9b65b74207889ad54a12a&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F78%2F05%2F88%2F58c776a7b281b.png"></body> </html>表示所有图片已加载完成