前言：服务器这几天都连不上，所以迟迟未更新，今天连上后才把插件文件和文档上传了。良心之作啊，难度虽不高，但命名多文件多啊。我得马上写篇博客絮叨一下，直接上地址。
文档及下载地址：www.chengguanhui.com/demos/loading-js/
1、简介
loading.js是本人近日开发的一款小插件，它主要是用于对图片进行预加载和展示多达28种的CSS3加载特效，非常小巧方便。这28个特效是网上收集回来的，为了在做小游戏或者写页面的时候使用更方便，我就把它做成了JS版本了。想要引入效果以及加载图片，现在一行代码就可以实现了。当然，这款插件很小，尚存在很多不足的地方，而且目前只支持较新的浏览器。但是千里之行，始于足下。我相信我正式工作以后会产出更多的好作品以及好博客的，望多多支持多多鼓励啊。
2、源码解释
首先创建loading对象以及存储28种特效类型的子div数量，后面就可以根据这组数据创建相应的结构了。
var loading = loading || {};
var types = {
"ball-pulse":3,
"ball-grid-pulse":9,
"ball-clip-rotate":1,
"ball-clip-rotate-pulse":2,
"square-spin":1,
"ball-clip-rotate-multiple":2,
"ball-pulse-rise":5,
"ball-rotate":1,
"cube-transition":2,
"ball-zig-zag":2,
"ball-zig-zag-deflect":2,
"ball-triangle-path":3,
"ball-scale":1,
"line-scale":5,
"line-scale-party":4,
"ball-scale-multiple":3,
"ball-pulse-sync":3,
"ball-beat":3,
"line-scale-pulse-out":5,
"line-scale-pulse-out-rapid":5,
"ball-scale-ripple":1,
"ball-scale-ripple-multiple":3,
"ball-spin-fade-loader":8,
"line-spin-fade-loader":8,
"triangle-skew-spin":1,
"pacman":5,
"ball-grid-beat":9,
"semi-circle-spin":1
};
以下就是整个插件函数的结构，赋了一些初值。
var small = "15px";
var normal = "25px";
var big = "40px";
(function(loading) {
var loaders = '<div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div>';
//初始化动画
function _init () {
……
}
//预加载图片
function loadingFn(imgs,cbFn) {
……
}
//绑定
loading.init = _init; })(loading)
loading的_init()方法有序执行以下代码：
（1）此方法有三个参数，第一个必填，二三选填。当只有两个参数时，需要判断第二参数是设置项对象，还是回调函数。
var obj = arguments[0];
var ops = arguments[1];
var cbFn = null;
//第二参数为空则将其置为回调函数
if(typeof(ops)=="function"){
cbFn = ops;
}else if(arguments.length==3){
cbFn = arguments[2];
}
（2）由于实参1中设置的数量是不定的，所以将用户设置的值拷贝到ops2后再返回ops。有设置的值将被覆盖，没设置的启用预设值。
var ops2={
size:"",
fullscreen:false,
type:"ball-pulse",
color:"",
bgColor:"#ed5565",
imgs:[]
};
//将ops中设置的值赋ops2
for (var key in ops) {
ops2[key] = ops[key];
};
//重设
ops = ops2;
（3）根据第一参数获取元素，让用户可以写id名或直接写元素节点变量。接着判断用户设置的类型，如果不等于预设值则到types中调用数据，创建相应数量的div。然后拼接动画结构的div字符串以及将设置的type（即class名）赋给相应的div。
//获取ID
var target = document.getElementById(obj);
if(target==null || !target){//容错
target = obj;
}
//非默认类型
if(ops.type!="ball-pulse"){
var length = types[ops.type];
var str = "";
for(var i=0;i<length;i++){
str+="<div></div>";
}
str = '<div class="loader"><div class="loader-inner ' + ops.type + '">'+ str + "</div></div>";
loaders = str;
}
（4）如果设置为全屏模式，则给body新建一个子div，设置大小为全屏并定位到最前方。这时候target不再是用户给定id的元素，而是新建的div，最后再插入到target。
//全屏模式
if(ops.fullscreen){
var loadWrap = document.createElement("div");
loadWrap.style.position = "absolute";
loadWrap.style.width = "100%";
loadWrap.style.height = "100%";
loadWrap.style.left = 0;
loadWrap.style.top = 0;
loadWrap.style.zIndex = 10000;
document.body.appendChild(loadWrap);
target = loadWrap;
}
//插入
target.innerHTML = loaders;
（5）如果用户设置了参数则修改相应的样式，如颜色、大小和背景。包裹动画的容器是默认居中的。
//颜色和大小
var loader = target.children[0];
var divs = loader.children[0].getElementsByTagName("div");
for(var j=0;j<divs.length;j++){
if(ops.color!=""||ops.color.length!=0){
divs[j].style.backgroundColor = ops.color;
}
if(ops.size.length!=0){
divs[j].style.width = ops.size;
divs[j].style.height = ops.size;
}
}
//背景
if(ops.bgColor!=""||ops.bgColor.length>=0){
loader.style.backgroundColor = ops.bgColor;
}
//居中
loader.style.position = "absolute";
loader.style.top = "50%";
loader.style.left = "50%";
loader.style.marginLeft = -loader.offsetWidth/2 + "px";
loader.style.marginTop = -loader.offsetHeight/2 + "px";
（6）如果用户定义了图片数组则调用加载图片的函数，否则获取本页的所有img的资源地址，并调用加载函数加载本页所有图片。
//加载图片
if (ops.imgs.length>0) {
loadingFn(ops.imgs,cbFn);
}else{
//若空则加载页面所有img
var imgs = document.getElementsByTagName("img");
var srcs = [];
for(var i=0;i<imgs.length;i++){
srcs[i] = imgs[i].getAttribute("src");
}
loadingFn(srcs,cbFn);
}
加载图片函数结构如下，参数1为图片数组,若空则直接执行回调函数；参数2为回调函数，存在时才执行。
//预加载图片
function loadingFn(imgs,cbFn) {
var index = 0;
//若页面没有img
if(imgs.length==0){
cbFn && cbFn();
return;
}
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.src = imgs[i];
img.onload = function () {
index++;
if (index == imgs.length) {
cbFn && cbFn();
};
}
};
}
3、示例
（1）默认简单版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--引入想要的动画-->
<link rel="stylesheet" type="text/css" href="css/ball-pulse.css"/>
<title>loading插件</title>
</head>
<body>
<!--指定动画容器-->
<div id="wrap"></div>
</body>
<!--引入loading.js-->
<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//一句搞定
loading.init(wrap);
</script>
</html>
（2）自定义完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--引入想要的动画-->
<link rel="stylesheet" type="text/css" href="css/ball-pulse.css"/>
<title>loading插件</title>
</head>
<body>
<!--指定动画容器-->
<div id="wrap"></div>
</body>
<!--引入loading.js-->
<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var wrap = document.getElementById("wrap");//可写可不写
var imgArr = ["img/p1.jpg","img/p2.jpg"];//需要加载的图片，若空则默认加载本页面图片
loading.init(wrap,{ //第一个参数写变量名或直接写"#wrap"均可
size:normal, //图形大小
type:"ball-pulse", //动画类型
color:"#fff", //图形颜色
bgColor:"#ed5565", //背景颜色
imgs:imgArr //加载图片数组
},function () { //回调函数
// wrap.style.display = "none";
})
</script>
</html>
好吧不多说了，快去看效果啦！
地址：www.chengguanhui.com/demos/loading-js/
说明：原创文章，转载时请注明出处，谢谢。