$.LoadEvents("showLoading",$("#tt"),"#902D2D");
$.LoadEvents("hideLoading",$("#tt"));
原生代码：
!(function ($) { ???$.extend({ ???????"LoadEvents": function (eventType, $parent, loadColor, bgColor, opacity, fn) { ???????????switch (eventType) { ???????????????case "showLoading": { ???????????????????if($(document.head).find(‘#css_loader‘).length == 0){ ???????????????????????$(document.head).append(‘<link rel="stylesheet" type="text/css" id="css_loader" href="loader.css">‘); ???????????????????} ???????????????????var loaderTargets = []; ???????????????????var $body = $(document.body); ???????????????????var _bgColor = ‘rgba(238,238,238,0.5)‘; ???????????????????var _opacity = 1; ???????????????????var _loadColor = ‘#67CF22‘; ???????????????????if (typeof(bgColor) != "undefined") { ???????????????????????_bgColor = bgColor; ???????????????????} ???????????????????if(typeof(opacity) != "undefined") { ???????????????????????_opacity = opacity; ???????????????????} ???????????????????if($parent.find("#events_loader").length == 0){ ???????????????????????// 可以有多个加载实例，所以需要用loaders管理 ???????????????????????var $loader = $("<div id=‘events_loader‘></div>").css({ ???????????????????????????background: _bgColor, ???????????????????????????opacity:_opacity, ???????????????????????????position: ‘absolute‘, ???????????????????????????top: 0, ???????????????????????????left: 0, ???????????????????????????width: ‘100%‘, ???????????????????????????height: ‘100%‘ ???????????????????????}); ???????????????????????// loading动画 ???????????????????????var $icon = $(‘<div class="spinner">‘+ ???????????????????????????‘<div class="rect1"></div>‘+ ???????????????????????????‘<div class="rect2"></div>‘+ ???????????????????????????‘<div class="rect3"></div>‘+ ???????????????????????????‘<div class="rect4"></div>‘+ ???????????????????????????‘<div class="rect5"></div>‘+ ???????????????????????????‘</div>‘); ???????????????????????if(typeof(loadColor) != "undefined") { ???????????????????????????_loadColor = loadColor; ???????????????????????} ???????????????????????$icon.children().css({"background":_loadColor}); ???????????????????????$loader.append($icon); ???????????????????????$parent.append($loader); ???????????????????} ???????????????????break; ???????????????} ???????????????case "hideLoading": { ???????????????????$parent.find("#events_loader").remove(); ???????????????????break ???????????????} ???????????} ???????} ???})})(jQuery);CSS
.spinner { ???width: 60px; ???height: 60px; ???text-align: center; ???font-size: 10px; ???position: absolute; ???top: 50%; ???left: 50%; ???transform: translate(-50%,-50%);}.spinner > div { ???height: 100%; ???width: 6px; ???display: inline-block; ???margin-left: 6px; ???-webkit-animation: stretchdelay 1.2s infinite ease-in-out; ???animation: stretchdelay 1.2s infinite ease-in-out;}.spinner .rect2 { ???-webkit-animation-delay: -1.1s; ???animation-delay: -1.1s;}.spinner .rect3 { ???-webkit-animation-delay: -1.0s; ???animation-delay: -1.0s;}.spinner .rect4 { ???-webkit-animation-delay: -0.9s; ???animation-delay: -0.9s;}.spinner .rect5 { ???-webkit-animation-delay: -0.8s; ???animation-delay: -0.8s;}@-webkit-keyframes stretchdelay { ???0%, 40%, 100% { ???????-webkit-transform: scaleY(0.4) ???} ???20% { ???????-webkit-transform: scaleY(1.0) ???}}@keyframes stretchdelay { ???0%, 40%, 100% { ???????transform: scaleY(0.4); ???????-webkit-transform: scaleY(0.4); ???} ???20% { ???????transform: scaleY(1.0); ???????-webkit-transform: scaleY(1.0); ???}}实现效果
引伸：$.extend({}),(function(){})(jQuery)的使用;
$.extend()深拷贝，浅拷贝的作用；
因为其本身存在一些重载原型
举个栗子：
var dog1={height:"60cm",age:3,color:{head:"yellow",body:"white"}};
var dog2={sex:"female",color:{body:"red"}};
var dog=$.extend(dog1,dog2);//默认false
var dog1=$.extend(true,dog1,dog2);
var dog2=$.extend(false,dog1,dog2);
//输出结果：
dog={height:"60cm",age:3,sex:"female",color:{body:"red"}};
dog1={height:"60cm",age:3,sex:"female",color:{head:"yellow",body:"red"}};
dog2={height:"60cm",age:3,sex:"female",color:{body:"red"}};
(function(){})(jQuery)有关匿名立即执行函数的理解；
(function(arg){...})(param),这个定义了一个带有arg参数的匿名函数，然后再通过param方法调用执行；
其实也就是相当于Var fuc = function(){};fn(param)。Jquery也是一样的操作。
$.extend()还可以针对jquery进行二次自定义封装方法
当你想要开发一个公用插件的时候就可以通过这种方式结合实现。
比如我想要将原生的js属性封装到自己的jquery里面去
举个栗子：将原生的document.getElementsByTagName封装给jquery去使用
JS模块
(function($){
$.extend({
"getTagname" : function(colval){
var tagname = document.getElementsByTagName(colval);
return tagname;
}
});
})(jQuery);
var tagval = $.getTagname("h1")[0];
console.log("tagval="+tagval.innerText);
Html模块
<h1>黄大大</h1>
上诉的LoadEvents也是同样的方法来封装实现的，主要介绍原理，实现可以自己尝试或留言询问。
Jquery防止重复点击,显示加载中.
原文地址：https://www.cnblogs.com/b-code/p/9042432.html