loading事件加载效果

在用户行为交互中，往往会产生按钮不小心点击2次而造成的BUG，在第一次未执行完后又进行了其他行为，这往往会导致数据的丢失或错误。最便捷的方法是在执行事件的过程中添加loading加载事件，如上图。只需要引用loading脚本，loading.show()展示，loaing.close()移除，即可。本人觉得很好用，兼容性也不错，所以把它copy过来了。
  1 var Loading = {
  2     css : {
  3         masklayer : {'height':'100%','width':'100%','z-index':'1010','position':'fixed','top':'0px','left':'0px','background-color':'#ecf7fc','filter':'alpha(opacity=50)','opacity':'0.5'},
  4         dialog : {'position':'fixed','z-index':'2000','text-align':'center','vertical-align':'middle','padding':'10px','filter':'alpha(opacity=90)','opacity':'0.9'},
  5         label : {'color':'#356999','font-size': '14px','display':'block','margin-top':'10px', 'font-weight':'bold'}
  6     },
  7     
  8     dom : {
  9         body : $("body"),
 10         masklayer : $('<div></div>'),    //遮罩层
 11         dialog : $('<div></div>'),        //弹出层
 12         img : $('<img alt="img" />'),    //加载中图片
 13         label : $('<label>数据加载中...</label>')    //显示文字
 14     },
 15     
 16     /**
 17      * 展示数据加载
 18      * @param msg
 19      */
 20     show : function(msg){
 21         Loading.dom.label.html(msg);
 22         //loading图片
 23         Loading.dom.img.attr("src", Loading.getRootPath() + "/Resources/js/loading/loading.gif");
 24         
 25         $("html").css("overflow", "hidden");
 26         Loading.dom.masklayer.css(Loading.css.masklayer);
 27         Loading.dom.dialog.css(Loading.css.dialog);
 28         Loading.dom.label.css(Loading.css.label);
 29                 
 30         Loading.dom.img.appendTo(Loading.dom.dialog);
 31         Loading.dom.label.appendTo(Loading.dom.dialog);
 32         Loading.dom.masklayer.appendTo(Loading.dom.body);
 33         Loading.dom.dialog.appendTo(Loading.dom.body);
 34         
 35         var page = Loading.GetPageSize();
 36         var scorll = Loading.GetPageScroll();
 37         var left = ((page.WinW - Loading.dom.dialog.width()) / 2 + scorll.X) + "px";
 38         var top = ((page.WinH - Loading.dom.dialog.height()) / 2 + scorll.Y) + "px";
 39         Loading.dom.dialog.css({"top":top, "left":left});
 40     },
 41     
 42     /**
 43      * 关闭数据加载
 44      */
 45     close : function(){
 46         $("html").css("overflow", "auto");
 47         Loading.dom.masklayer.remove();
 48         Loading.dom.dialog.remove();
 49     },
 50     
 51     // 获取页面大小
 52     GetPageSize : function() {
 53         var scrW = 1280, scrH = 768;
 54         if (window.innerHeight && window.scrollMaxY) {
 55             // Mozilla
 56             scrW = window.innerWidth + window.scrollMaxX;
 57             scrH = window.innerHeight + window.scrollMaxY;
 58         } else if (document.body.scrollHeight > document.body.offsetHeight) {
 59             // all but IE Mac
 60             scrW = document.body.scrollWidth;
 61             scrH = document.body.scrollHeight;
 62         } else if (document.body) { // IE Mac
 63             scrW = document.body.offsetWidth;
 64             scrH = document.body.offsetHeight;
 65         }
 66 
 67         var winW = 0, winH = 0;
 68         if (window.innerHeight) { // all except IE
 69             winW = window.innerWidth;
 70             winH = window.innerHeight;
 71         } else if (document.documentElement
 72                 && document.documentElement.clientHeight) {
 73             // IE 6 Strict Mode
 74             winW = document.documentElement.clientWidth;
 75             winH = document.documentElement.clientHeight;
 76         } else if (document.body) { // other
 77             winW = document.body.clientWidth;
 78             winH = document.body.clientHeight;
 79         }
 80 
 81         // for small pages with total size less then the viewport
 82         var pageW = (scrW < winW) ? winW : scrW;
 83         var pageH = (scrH < winH) ? winH : scrH;
 84 
 85         return {
 86             PageW : pageW,
 87             PageH : pageH,
 88             WinW : winW,
 89             WinH : winH
 90         };
 91     },
 92 
 93     // 获取滚动条位置
 94     GetPageScroll : function() {
 95         var x = 0, y = 0;
 96         if (window.pageYOffset) {
 97             // all except IE
 98             y = window.pageYOffset;
 99             x = window.pageXOffset;
100         } else if (document.documentElement
101                 && document.documentElement.scrollTop) {
102             // IE 6 Strict
103             y = document.documentElement.scrollTop;
104             x = document.documentElement.scrollLeft;
105         } else if (document.body) {
106             // all other IE
107             y = document.body.scrollTop;
108             x = document.body.scrollLeft;
109         }
110         return {
111             X : x,
112             Y : y
113         };
114     },
115     
116     getRootPath : function(){    
117         //获取当前网址，如： http://localhost:8083/uimcardprj/share/meun.jsp    
118         var curWwwPath=window.document.location.href;    
119         //获取主机地址之后的目录，如： uimcardprj/share/meun.jsp    
120         var pathName=window.document.location.pathname;    
121         var pos=curWwwPath.indexOf(pathName);    
122         //获取主机地址，如： http://localhost:8083    
123         var localhostPaht=curWwwPath.substring(0,pos);    
124         //获取带"/"的项目名，如：/uimcardprj    
125         var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);    
126         return(localhostPaht+projectName);
127     }
128 };
View Code
loading图片附上：