JQueryのトグル（） - 要素がJQueryサブミット関数の後にのみ表示されます

Question

JQueryサブミット関数の先頭にロードGIFを表示しようとしていますが、サブミット関数の終了後にgifが表示されます。 （各警告はgifの前に表示されます）

ajaxでは、私は現在、「No video selected」というエラーで常に応答するように設定しています。

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これを削除しても問題は解決しないはずです。