移动端的 开机动画
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
- height: 100%; overflow: hidden; 禁止滚动条
- 初始包含块 为 #wrap ,即设置 position: relative;
- 包裹设置 width 和 height,给 img 设置 width: 100%;
- (相对来说)项目当前的进度 = 图片加载成功的个数 / 图片的总数 = 加载条的 进度
- js,css,font,依赖包,都加载比较快 , img 加载慢,近乎决定了项目加载速度(window.onload)
- img 在使用的时候才会加载
- 创建一个数组: 保存图片的路径
- data.js
-
/**** data.js ****/ var imgPath = { logo:["./img/logo/logo1.png", "./img/logo/logo2.png"], pageBg:["./img/bg1.jpg", "./img/bg2.jpg"], loadIcon:["./img/load/ico1.png", "./img/load/ico2.png"] }; // imgPath.logo[1]
// imgPath[logo][1]
-
- index.js
-
<script type="text/javascript" src="./js/data.js"></script> <script type="text/javascript"> var imgArr = []; // 保存项目的图片路径 for(var attr in imgPath){ // 每个数组 imgPath[attr]; // 将 imgPath[attr] 的元素放入 imgArr 中 // 合并 imgArr 和 imgPath[attr] imgArr = imgArr.concat(imgPath[atrr]); } </script>
/****
var arr1 = [1,2];
var arr2 = [3,4,5];
arr1.concat(arr2); // arr1[1,2]; arr2[3,4,5];
arr1 = arr1.concat(arr2);
****/
-
- data.js
-
- var img = new Image(); // 项目中,创建 <img src="" /> 的方式
-
// 只要 img 图片加载成功,就会触发 img.onload 事件 var imgCount; // 项目进度 = 图片加载成功数 / 要加载的图片总数 for(var i=0; i<imgArr.length; i++){ var img = new Image(); img.src = imgArr[i]; img.onload = function(){ imgCount += 1; tips.innerHTML = "已加载"+ Math.round(imgCount/imgArr.length*100)+ "%"; }; };
-
- var img = new Image(); // 项目中,创建 <img src="" /> 的方式
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title></title> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> <style rel="stylesheet" type="text/css"> html, body, div, ul, li { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; /* 参照屏幕区域的高 */ min-width: 600px; overflow: hidden; } #wrap { width: 100%; min-height: 100%; background: cadetblue; } #content { width: 100%; padding-bottom: 50px; font-size: 14px; background: darkgrey; } #footer { width: 100%; height: 50px; margin-top: -50px; background: chocolate; text-align: center; line-height: 50px; } /**** Loading Animation ****/ #loading_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-style: preserve-3d; perspective: 300px; background-color: #ccc0; } /**** Rotating Tips ****/ #loading_tips { margin-bottom: 10px; font-size: 48px; text-align: center; animation: rotateLetter 3s infinite alternate; } @keyframes rotateLetter { from { transform: rotateY(-30deg); } to { transform: rotateY(30deg); } } /**** Floating Words ****/ #loading_animation { list-style: none; background-color: #bbb0; } #loading_animation li:last-child { margin-right: 0px; } #loading_animation li { float: left; margin-right: 10px; animation: jumpLetter 3s infinite alternate; } @keyframes jumpLetter { from { transform: translateY(0px); } to { transform: translateY(-15px); } } </style> </head> <body> <!-- 模拟屏幕区域 --> <div id="wrap"> <!-- 内容区域 --> <div id="content"> <div id="loading_box"> <div id="loading_tips"> </div> <ul id="loading_animation"> <li>L</li> <li>o</li> <li>a</li> <li>d</li> <li>i</li> <li>n</li> <li>g</li> </ul> </div> </div> </div> <!-- 底部区域 --> <div id="footer"> </div> <script type="text/javascript" src="./js/index.js"></script> <script type="text/javascript" src="./js/data.js"></script> <script type="text/javascript"> var lis = document.querySelectorAll("#loading_animation li"); var colorArr = ["red", "green", "blue"]; var i = 0; for(i=0; i<lis.length; i++){ lis[i].style.color = colorArr[i%3]; lis[i].style.animationDelay = i*100+"ms"; } var loadingTips = document.getElementById('loading_tips'); //创建数组:保存项目的图片 var imgArr = []; //保存图片加载成功的个数 var index = 0; //把data中图片路径塞到imgArr中 for(var i in imgData){ //枚举对象上的每一个属性 imgArr = imgArr.concat(imgData[i]) }; //项目进度 = 图片加载成功的个数 / 图片总数 for(var i=0;i<imgArr.length;i++){ //创建img var img = new Image();//创建图片对象 img.src = imgArr[i]; //图片加载成功 img.onload = function () { index++; console.log(Math.round(index/imgArr.length*100)); loadingTips.innerHTML = Math.round(index/imgArr.length*100)+'%'; }; } </script> </body> </html>