在用户行为交互中,往往会产生按钮不小心点击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 };
loading图片附上: