在加载映像时不显示任何问题，并使用jquery阻止

Question

我使用gif图像进行加载，它是默认的显示无，当表单提交时，它将显示块，当ajax请求完成时，它将再次显示none，如下所示

​

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()函数放置在成功回调()中，这意味着只有在ajax函数成功时它才会隐藏。如果有错误，不会隐藏它。

您可以向ajax调用添加一个错误回调.fail()，如下所示；下面的演示可能会输出一个错误，因此它将隐藏图像。

您可以删除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

您可以获得更多关于警告here的信息。

我刚在你的代码上加了一行

<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>

希望它能帮到你。