fadeToggle во время длинного вызова Ajax

Question

Я использую fadeToggle, чтобы показать «занятое» изображение во время вызова ajax. Это отлично работает, когда вызов ajax занимает секунду или два. Но когда вызов ajax занимает несколько секунд, загруженное изображение не отображается до тех пор, пока в конце вызова ajax не появится - похоже, это происходит во всех браузерах.

Вот изображение:

<img id="globalBusy" class="hide" src="/Content/Images/globalbusy-live.gif" alt="Busy" title="Busy" width="52" style="display: none;"></a>      

Вот Аякса вызов:

$("#globalBusy").fadeToggle(200, "linear"); 

$.ajax({ 
    url: GetData(), 
    type: "POST", 
    data: JSON.stringify(requestModel), 
    datatype: "json", 
    contentType: "application/json; charset=utf-8", 
    timeout: 60000, 
    success: function (model) { 
     $("#globalBusy").fadeToggle(400, "linear"); 
    } 
}) 

Я попытался освежить образ, но он не работает. Он по-прежнему отображается только правильно, когда вы попадаете в функцию успеха, поэтому вы видите его только кратко.

Answer 1

Вам нужно убедиться, что ваш первый fadeToggle находится в готовой к работе функции jQuery $(function() {....});. В противном случае он не будет выполняться, так как он не найдет изображение #globalBusy.

Пример работы здесь:

/* Ignore this command - just for mocking up an ajax response */ 
 
$.mockjax({ 
 
    url: '/testajax', 
 
    type: 'post', 
 
    responseTime: 8000, 
 
    responseText: { 
 
    status: 'success', 
 
    message: 'Working!' 
 
    } 
 
}); 
 

 
$(function() { 
 
    $("#globalBusy").fadeToggle(200, "linear"); 
 
    $("#status").text("Loading...."); 
 

 
    $.ajax({ 
 
     url: '/testajax', 
 
     type: "POST", 
 
     data: { test: "test" }, 
 
     datatype: "json", 
 
     contentType: "application/json; charset=utf-8", 
 
     timeout: 60000, 
 
     success: function (model) { 
 
      $("#globalBusy").fadeToggle(400, "linear"); 
 
      $("#status").text("Success...."); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script> 
 
<img id="globalBusy" class="hide" src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="Busy" title="Busy" width="52" style="display: none;"> 
 
<div id="status"></div>