loading插件（原创）

　　前言：服务器这几天都连不上，所以迟迟未更新，今天连上后才把插件文件和文档上传了。良心之作啊，难度虽不高，但命名多文件多啊。我得马上写篇博客絮叨一下，直接上地址。

　　文档及下载地址：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/

　　说明：原创文章，转载时请注明出处，谢谢。