CSS3_移动端_开机动画

移动端的开机动画

<meta>

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);
****/

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)+
                          "%";
    };
};

CSS3_移动端_开机动画

猜你喜欢