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