JQ-AJAX-簡單實用loading效果
阿新 • • 發佈：2018-12-11
在AJAX請求前設定loading效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8) url('http://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat; } body.loading .modal { display: block; overflow: hidden; } </style> </head> <body> <img src="./18985bf22cef636551d902842e5d25f8.jpg" /> <div class="modal"> <!-- Place at bottom of page --> </div> </body> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ajaxStart(function() { $("body").addClass("loading"); }) .ajaxStop(function() { $("body").removeClass("loading"); }); $.ajax({ type: "get", url: "http://localhost:8080/test/ok", dataType: "json", success: function(data) { console.log("success") }, error: function(e) { console.log("error") }, }); </script> </html>
效果：
