问题解决：fakeLoader无法实现点击button然后在弹出加载动画
查看css文件后发现：
1 .fakeLoader { 2 position:fixed; 3 width:100%; 4 height:100%; 5 left:0; 6 top:0; 7 z-index:9999999999 8 }
直接提前设置了个全页面的覆盖层，所以button是不可点击的，真的是太坑了，一上来就设置一个透明的覆盖层，
解决办法：
动态加载css文件，就可以解决这个问题了
案例运行代码：
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5 <title>DEMO4</title> 6 7 </head> 8 <body> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 10 <script src="js/fakeLoader.min.js"></script> 11 <script> 12 $(document).ready(function(){ 13 $("button[class='btn btn-primary']").click(function(){ 14 $("<link>") 15 .attr({ rel: "stylesheet", 16 type: "text/css", 17 href: "css/fakeLoader.min.css" 18 }) 19 .appendTo("head"); 20 $.fakeLoader({ 21 timeToHide:12000, 22 bgColor:"#34495e", 23 spinner:"spinner3" 24 }); 25 }); 26 }); 27 </script> 28 <div class="fakeLoader"></div> 29 <button class="btn btn-primary">adf </button> 30 </body> 31 </html>
————————————————————————————————————————————————————————————————————————————————————
更改：2021_4_25
全新更改包含form表单提交：
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5 <title>DEMO4</title> 6 7 </head> 8 <body> 9 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 10 <script src="js/fakeLoader.min.js"></script> 11 <script> 12 13 $(document).ready(function(){ 14 $("button[class='btn btn-primary']").click(function(){ 15 $("<link>") 16 .attr({ rel: "stylesheet", 17 type: "text/css", 18 href: "css/fakeLoader.min.css" 19 }) 20 .appendTo("head"); 21 $.fakeLoader({ 22 timeToHide:12000, 23 bgColor:"#34495e", 24 spinner:"spinner3" 25 }); 26 $("form").submit(); 27 }); 28 }); 29 </script> 30 <div class="fakeLoader"></div> 31 32 <form action="#" method="post" enctype="multipart/form-data"> 33 <button class="btn btn-primary" type='button' ">adf </button> 34 </form> 35 36 37 38 </body> 39 40 </html>
