如何監控整頁網頁表單在會發出任一ajax請求時顯示loading等待的gif
一開始就添加個stytle樣式吧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <style> .modal { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ) url('https://media.giphy.com/media/sSgvbe1m3n93G/giphy.gif') 50% 50% no-repeat; } /* When the body has the loading class, we turn the scrollbar off with overflow:hidden */ body.loading { overflow: hidden; } /* Anytime the body has the loading class, our modal element will be visible */ body.loading .modal { display: block; } </style> |
在body tag裡面寫段jQuery處理邏輯
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <body> <div class="panel admin-panel"> <div class="panel-head"><strong><span class="icon-key"></span> 編輯會員</strong></div> <div class="body-content"> <form method="post" class="form-x" action=""> ....... <div class="modal"></div> </form> </div> </div> <script type="text/javascript"> $body = $("body"); $(document).on({ ajaxStart: function() { $body.addClass("loading"); }, ajaxStop: function() { $body.removeClass("loading"); } }); </script> </body> |
藉由
ajaxStart()方法:AJAX 請求開始時運行呼叫。
ajaxStop()方法:在所有Ajax請求都完成時呼叫。
做樣式的增減更改
留言
張貼留言