Загрузчик не работает во время синхронного вызова ajax в chrome

Загрузчик не работает во время синхронного (асинхронного: ложного) вызова ajax в google chrome. Работает нормально в Firefox и IE. Во время моего отладочного тестирования загрузчик отображается до начала запроса ajax. вычеркивается или исчезает при отправке запроса на сервер, где я сохранил точку отладки. Я пробовал другие решения, такие как использование ajaxStart, beforeSend и загрузчика ajax и т. Д., Но бесполезно. Пожалуйста, дайте верное решение

 <div id="LoaderDiv" style="display: none">
    <img id="ImageLoader" src="Images/loading.gif" />
 </div>

            $('#LoaderDiv').show();
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: servicePath,
                async: false,
                success: function (data) {
                    console.log(data.d);
                    $('#LoaderDiv').hide();
                }
            });

google-chrome jquery ajax loading synchronous
person John Wink    schedule 13.11.2014    source источник
comment
Может быть, поместить вызов ajax в другую функцию и использовать setTimeout для ее вызова через 100 мс или что-то маленькое?   -  person artm    schedule 13.11.2014
comment
Это означает, что анимация GIF застряла между ними. Правильно?   -  person Apul Gupta    schedule 13.11.2014
comment
См. stackoverflow.com/questions/26906278/   -  person artm    schedule 13.11.2014
comment
@artm: Пробовал, но бесполезно;   -  person John Wink    schedule 13.11.2014
comment
@Apul Gupta: Да, но это произойдет только тогда, когда инструменты разработчика открыты, в противном случае загрузчик даже не виден.   -  person John Wink    schedule 13.11.2014
comment
В режиме синхронизации предыдущий вызов show() может застрять. Вы должны использовать тайм-аут для $('#LoaderDiv').show();, а не для вызова ajax.   -  person Mavlarn    schedule 13.11.2014
comment
извините, я не получил ваш вопрос. Гифка сначала показывалась, а потом после отправки запроса на сервер исчезла. Этого я тоже ожидаю. я что-то упускаю?   -  person dsharew    schedule 24.03.2015
comment
@Degen Sharew: Спасибо за ваш интерес. На самом деле, мое требование - показывать значок загрузки до тех пор, пока запрос не вернется с сервера во время синхронного вызова ajax. но это не работает в случае Google Chrome.   -  person John Wink    schedule 21.05.2015
comment
@KiranNuthanapati проверьте мой ответ на наличие длинного комментария :-) и возможного решения.   -  person dsharew    schedule 21.05.2015
comment
использовать async: true или использовать jquery, когда метод готов   -  person ashish bansal    schedule 29.07.2019

Ответы (4)


arrow_upward
9
arrow_downward

Я также столкнулся с той же проблемой за последний 1 год, даже с асинхронностью: ложь. Наконец-то нашел лучшее решение, но не уверен, что оно сработает в вашем случае, мне помогло на 101%.

Ниже приведен код: -

    $.ajax({ 
                .. , 
             beforeSend: function () { showLoader(); },

             success: function (data) { hideLoader(); } 
    });


function showLoader() {
    $("#progressbar").css("display", "");
}

function hideLoader() {
    setTimeout(function () {
        $("#progressbar").css("display", "none");
    }, 1000);
}

вы можете сделать эти две функции общими в любом общем файле javascript. Так что вы можете вызывать эти функции в нескольких местах или файлах js.

HTML это:

<div class="spinnermodal" id="progressbar" style="display: none; z-index: 10001">
  <div style="position: fixed; z-index: 10001; top: 50%; left: 50%; height:65px">
      <img src="~/Images/loading.gif" alt="Loading..." />
    </div>
</div>

CSS это:

.spinnermodal {
        background-color: #FFFFFF;
        height: 100%;
        left: 0;
        opacity: 0.5;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100000;
    }

Попробуй это. Я надеюсь, что это сработает и для вас. Удачного кодирования :-)

person Sunny_Sid    schedule 19.01.2016
comment
Спиннер может не отображаться при использовании async=false, поэтому, если приведенный выше ответ по-прежнему не показывает загрузчик, попробуйте удалить его, это решило проблему для меня. - person Aditya; 25.05.2020

arrow_upward
5
arrow_downward

Поместите setTimeout перед запросом ajax. Я пробовал много решений, но это определенно работает.

$("#loader").show();
setTimeout(function () {
  //AJAX REQUEST CODE
  $("#loader").hide();
},10);
person chirag    schedule 08.09.2017

arrow_upward
2
arrow_downward

Или просто это

$.ajax({ 
                    .. , 
                 beforeSend: function () { $('#LoaderDiv').show(); },

                 success: function (data) { $('#LoaderDiv').hide(); } 
        });

что сделает его немного быстрее

person Binoy Kumar    schedule 17.03.2017

arrow_upward
0
arrow_downward

Я попробовал это в google-chrome, это работает. Может быть, проверьте, есть ли у вас какие-либо другие ошибки, или попробуйте опубликовать больше кода, если вы пропускаете какой-то код в своем вопросе.

проверьте свой код на jsfiddle, он работает.

Я только добавил это в ваш код:

error: function(data){
                       $('#LoaderDiv').hide(); 
               }

Но обратите внимание, я добавил функцию обработки ошибок, потому что без нее изображение (ваш gif) будет отображаться всегда, когда произойдет ошибка. (Если вы получали какой-либо ответ об ошибке от сервера, это будет решением)

person dsharew    schedule 21.05.2015