當信號微弱時旋轉輪子

Question

我有一個表格，我的用戶在他們的手機上填寫，用戶點擊提交按鈕後，我彈出一個旋轉輪，以便用戶不會再次點擊提交按鈕。

不幸的是，如果他們的手機信號微弱，旋轉輪不會出現，用戶再次點擊提交按鈕。這會導致提交兩種表單。

如果我點擊隱藏按鈕，我不會有相同的程序？真正的問題是，當用戶點擊提交按鈕時，由於信號微弱，請求仍在處理中？還有什麼其他解決方案？

#divLoading 
{ 
display : none; 
} 
#divLoading.show 
{ 
display : block; 
position : fixed; 
z-index: 100; 
background-image : url('spinner.gif'); 
background-color:#666; 
opacity : 0.4; 
background-repeat : no-repeat; 
background-position : center; 
left : 0; 
bottom : 0; 
right : 0; 
top : 0; 

}

<script> 
$(document).ready(function(){ 
    $("#saveandsubmitbutton").click(function(){ 
     $("div#divLoading").addClass('show'); 
    }); 
}); 
</script> 

Answer 1

作爲對提交表單多次額外的保護，則應禁用它被按下後，立即提交按鈕。

<input type="submit" onclick="this.disabled = true" value="Submit"/> 

來源：How to submit form only once after multiple clicking on submit?

正如上面JD6969評論，另外你可以預裝spinner.gif圖像。我發現了一個很好的方式，在另一個問題來做到這一點：

$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

// Usage: 

$(['spinner.gif']).preload(); 

來源：Preloading images with jQuery

Answer 2

你應該預裝spinner.gif。

<img src="spinner.gif" id="spinner"> 

#spinner { position:absolute; left:-9999px; top:-9999px } 

Answer 3

<script> 
$(document).ready(function(){ 
    $("#saveandsubmitbutton").click(function(){ 
     $("div#divLoading").addClass('show'); 
     $(document).off("click","#saveandsubmitbutton"); 
    }); 
    }); 
</script>