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

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

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

источник

2014-11-13 Kiran Nuthanapati

Может быть, вызов ajax внутри другой функции и использовать setTimeout для вызова его после 100 mss или чего-то малого? – artm

Это означает, что анимация GIF застряла между ними. правильно? –

См. Http://stackoverflow.com/questions/26906278/show-modal-loading-div-is-not-running-in-google-chrome-and-ie-browsers-firefox – artm

У меня также была такая же проблема с последнего 1 года Даже с асинхронным: false. Наконец, получил лучшее решение, но не уверен, что он будет работать в вашем случае, он работал на мне 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>

КСС:

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

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

источник

2016-01-19 12:44:37

@Sunny_side ваш код не работает. –

убедитесь, что все коды выполнены правильно. @RonakRathod –

@Sunny_side вы можете добавить рабочую скрипку для демонстрации? –

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

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

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

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

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

источник

2015-05-21 11:45:11 dsharew

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

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

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

, который сделает его немного более быстрый

источник

2017-03-17 05:45:46

Put SetTimeout до АЯКС запроса. Я пробовал много решений, но это определенно работает.

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

источник

2017-09-08 12:48:35 chirag

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

ответ

Смежные вопросы