[图片上传中...(屏幕快照 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;
})
