<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width initial-scale=1.0 user-scalable=no"/> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body,html{ height: 100%; overflow: hidden; } #wrap{ height: 100%; position: relative; perspective: 200px; } #wrap > .inner{ height: 100%; position: relative; transform-style: preserve-3d; } #wrap > .inner > img{ height: 30%; margin-top: -60px; animation: move 1s infinite; } @keyframes move{ from{transform: translate3d(-50%,-50%,0) rotateY(0deg);} to{transform: translate3d(-50%,-50%,0) rotateY(360deg);} } #wrap > .inner > img,#wrap > .inner > p{ position: absolute; left: 50%; top: 50%; transform: translate3d(-50%,-50%,0); } </style> </head> <body> <div id="wrap"> <div class="inner"> <img src="img/load/logo2.png"/> <p>已加载0%</p> </div> </div> </body> <script src="../2D变换/js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script> <script src="js/data.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var $pNode = $("p"); var flag = 0; var images = []; for (item in imgData) { images = images.concat(imgData[item]) } for (var i = 0 ; i<images.length;i++) { //实现图片的预加载，然后实现loading的百分比 var img = new Image(); img.src = images[i]; img.onload = function(){ flag++; $pNode.html("已加载"+(Math.round(flag/images.length*100))+"%") console.log(Math.round(flag/images.length*100)) } img.onerror = function(){ alert('地址有问题') } } }) </script> </html>