如何監控整頁網頁表單在會發出任一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請求都完成時呼叫。

做樣式的增減更改












留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題