loading插件(原创)

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

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

 

  说明:原创文章,转载时请注明出处,谢谢。

posted @ 2015-08-07 16:28  小辉_Ray  阅读(3284)  评论(2编辑  收藏  举报