[图片上传中...(屏幕快照 2017-11-17 下午6.06.12.png-68927a-1510913285135-0)]

前言

本文主要记录一下，在开发中常用到的 网页加载动画效果实现原理。

一·通过加载状态事件来制作加载动画

document.readystate

// 描述当前文档的状态

一个文档的 readyState 可以是以下之一：
loading ：document 仍在加载
interactive：互动，文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载
complete：完成，文档和所有子资源已完成加载。状态表示 load 事件即将被触发。文档和所有子资源已完成加载。状态表示 load事件即将被触发。

当这个属性的值变化时,document对象上的 readystatechange事件将被触发

document.onreadystatechange

//文档的 readyState 属性发生更改时，readystatechange 事件会被触发

document.onreadystatechange = function () {
    if (document.readyState === "interactive") {
       // 执行代码
    }
}

进度条动画制作网站：
https://loading.io/

此网站中的加载动画基本满足日常开发需要
也可以自己用css3写一个加载动画，
考虑到css3有许多浏览器的兼容写法，可将编写好的 css3代码 放入http://autoprefixer.github.io/中进行在线css 代码精简 和私有前缀补充。

二 实时获取加载数据的进度条

利用图片预加载的原理

//单图原理
function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {//如果有缓存
        //接下来可以使用图片了
        //do something here
    }
    else {
        img.onload = function() {
            img.onload = null;
            //接下来可以使用图片了
            //do something here
        };
    }
}

//多图
//1-获取页面图片元素节点
var img=$('img');
var num=0;
//2-遍历图片
img.each(function(i){
//2-创建images对象
var oImg=new Image();
//3-图片加载完毕以后
oImg.onload=function(){
   oImg.onload=null;
   num++;
   //4-生成当前图片加载完成比例 百分数
   //parseInt(num/$('img').length*100)+'%')
   if(num>=i){
     //隐藏加载动画
   }
 }
oImg.src=img[i].src;
})