JQuery toggle（） - 元素僅在JQuery提交函數後顯示

Question

我試圖在JQuery提交函數的開頭顯示加載gif，但gif僅在提交函數結束後才顯示。 （每個警報都顯示在gif之前）

對於ajax，我目前將其設置爲始終以「沒有選擇視頻」的錯誤進行響應。

JQuery的

$("#myForm").submit(function(e){ 
    e.preventDefault(); 

    $("#loading_gif").toggle(); 
    alert('The gif should be displayed'); 

    var Fdata = new FormData($(this)[0]); 
    $.ajax({ 
     type: "POST", 
     url: "/send_video", 
     data: Fdata, 
     processData:false, 
     contentType: false, 
     async:false, 
     cache: false, 
     success: function(data){ 
      alert('success'); 
      //commented or else the gif is never displayed 
      //$("#loading_gif").toggle(); 
     }, 
     error: function(error){ 
      alert('error'); 
      e = document.getElementById("error"); 
      e.innerHTML = JSON.parse(error.responseText); 
      //commented or else the gif is never displayed 
      //$("#loading_gif").toggle(); 
     } 
    }); 
}); 

HTML

<div id="error"></div> 
<form id="myForm" action="/" method="post" enctype="multipart/form-data"> 
    <input id="video" type="file" name="video"> 
    <input id="submit" type="submit" value="Send"> 
    <img id="loading_gif" style="display:none" src="mysite/img/loading.gif"> 
</form> 

我不認爲$阿賈克斯的問題，因爲我刪除它，仍然沒有奏效。

我已經嘗試過單獨從通過這樣的提交，其餘切換（）：

$("#submit").click(function(){ 
    $("#loading_gif").toggle(); 
    $("#myForm").submit(); 
}); 

但什麼也沒有改變。

非常感謝。

Answer 1

你不想要async:false刪除這個和你的問題應該消失。