JQuery toggle()-元素仅显示在JQuery submit函数之后

我试图在JQuery提交函数的开头显示加载的gif,但gif仅在提交函数结束后显示。(每个警报都显示在gif之前)

对于ajax,我当前将其设置为始终以错误响应,即“未选择任何视频”。

$("#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();
        }
    });
});

<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>

我不认为美元。ajax是个问题,因为我删除了它,但仍然无法工作。

我已经尝试通过以下操作将toggle()从提交的其余部分中分离出来:

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