Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: John WinkОтветов: 4

Загрузчик не работает во время синхронного (асинхронного: ложного) вызова 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();
                }
            });
  • Может быть, поместить вызов ajax в другую функцию и использовать setTimeout для ее вызова через 100 мс или что-то маленькое? artm 13.11.2014
  • Это означает, что анимация GIF застряла между ними. Правильно? Apul Gupta 13.11.2014
  • См. stackoverflow.com/questions/26906278/ artm 13.11.2014
  • @artm: Пробовал, но бесполезно; John Wink 13.11.2014
  • @Apul Gupta: Да, но это произойдет только тогда, когда инструменты разработчика открыты, в противном случае загрузчик даже не виден. John Wink 13.11.2014
  • В режиме синхронизации предыдущий вызов show() может застрять. Вы должны использовать тайм-аут для $('#LoaderDiv').show();, а не для вызова ajax. Mavlarn 13.11.2014

google-chromejqueryajaxloadingsynchronous

Ответы

Ответ 1 · рейтинг 9 · Sunny_Sid

Я также столкнулся с той же проблемой за последний 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;
    }

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

Ответ 2 · рейтинг 5 · chirag

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

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

Ответ 3 · рейтинг 2 · Binoy Kumar

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

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

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

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

Ответ 4 · dsharew

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

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

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

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

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

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы