проблема с загрузкой изображения: нет изображения и блок с jquery

Question

Я использую gif-изображение для загрузки, и это значение по умолчанию - none, а когда форма отправляется, она будет отображать блок, а когда запрос ajax будет выполнен, он снова не будет отображать ничего, как показано ниже

function showLoader() {
    $("#loading-image").css("display", "block");
}
function hideLoader() {
    $("#loading-image").css("display", "none");
}
$("#review_submit").click(function(e) {
  e.preventDefault();
  showLoader();
  var fd = $("form").serialize();
  $.ajax({
            type: 'POST',
            async : false,
            url: '',
            data: fd,
            contentType: false,
            processData: false,
            success: function(response){
                console.log(response);
                hideLoader();
                
            }
        });     
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="" id="review_form" method="post" class="wp-form" novalidate="novalidate">
 <input type="text" name="product" />
  <input class="add-my-review large_button" type="submit" id="review_submit" value="Add My Review" name="add_review">
</form>

<span class="ajax-loader" id="loading-image" style="display: none;">
  <img alt="Loading..." src="/assets/images/loader.gif" />
</span>

но этот код не работает вживую

Может кто-нибудь помочь мне в этом

Answer 1

Ваш код работает на самом деле. Просто вы поместили свою функцию hideLoader() в функцию обратного вызова success, , что означает, что она будет скрыта только при успешном выполнении функции ajax. При наличии ошибки она не будет скрыта.

Вы можете добавить сообщение об ошибке .fail() к вашему вызову ajax, как показано ниже; Приведенная ниже демонстрация, скорее всего, выдаст ошибку, следовательно, она скроет изображение.

Вы можете удалить упаковщик setTimeout, я просто поместил его, потому что он скрывает его мгновенно.

function showLoader() {
  $("#loading-image").css("display", "block");
}

function hideLoader() {
  $("#loading-image").css("display", "none");
}
$("#review_submit").click(function(e) {
  e.preventDefault();
  showLoader();
  var fd = $("form").serialize();
  $.ajax({
    type: 'POST',
    async: false,
    url: '',
    data: fd,
    contentType: false,
    processData: false,
    success: function(response) {
      console.log(response);
      hideLoader();
    }
  }).fail(function(data) {
    console.log(data);
    setTimeout(function() {
      hideLoader();
    }, 2000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="add-my-review large_button" type="submit" id="review_submit" value="Add My Review" name="add_review">

<span class="ajax-loader" id="loading-image" style="display: none;">
  <img alt="Loading..." src="https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif" />
</span>

Answer 2

при отладке я обнаружил предупреждение

Синхронный XMLHttpRequest в основном потоке устарел

Подробнее о предупреждении можно прочитать здесь

и я только что добавил эту строку в ваш код

<script>$.ajaxPrefilter(function( options, originalOptions, jqXHR ) { options.async = 
true; });</script>

как

<script>$.ajaxPrefilter(function( options, originalOptions, jqXHR ) { options.async = 
true; });</script>

<script>

function showLoader() {
$("#loading-image").css("display", "block");
}
function hideLoader() {
$("#loading-image").css("display", "none");
}
$("#review_submit").click(function(e) {
e.preventDefault();
showLoader();
var fd = $("form").serialize();
$.ajax({
        type: 'POST',
        async : false,
        url: '',
        data: fd,
        contentType: false,
        processData: false,
        success: function(response){
            console.log(response);
            hideLoader();

        }
    });     

  });

 </script>

надеюсь, это поможет вам.