前言：服務器這幾天都連不上，所以遲遲未更新，今天連上后才把插件文件和文檔上傳了。良心之作啊，難度雖不高，但命名多文件多啊。我得馬上寫篇博客絮叨一下，直接上地址。
文檔及下載地址：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/
說明：原創文章，轉載時請注明出處，謝謝。