Question

您好我的代码有以下问题：我无法隐藏装载。我已经尝试过Mozilla，Chrome，只有在将其粘贴到控制台时才有效。开始加载的Html

<div class="loading" style="display: none">

之后.show

<div class="loading" style="display: block;">

的Ajax

$.ajax({
    url: "/uzemnenie",
    cache: false,
    async: true,
    dataType: "html",
    success: function (data) {
        console.log("in ajax ", data.slice( 0, 100 ));
        $('.content').empty().html(data);
    }
});

网页上的代码

$( document ).ajaxStart(function() {
    $(".content").fadeOut( "slow", function() {
        $(".loading").show().css("display", "block");
    });
});

$( document ).ajaxStop(function() {
    $(".loading").hide();
    $(".content").fadeIn("slow", function() {
        $('#show').fadeIn("slow");
    });
});

仅在以下情况下有效：

$( document ).ajaxStop(function() {
                $(".loading").css("display", "none");
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
            });

奇怪的部分 - 内容也被添加

                $( document ).ajaxStop(function() {
                $(".loading").hide(function(){
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
                });
            });

内容显示正确。谢谢你的回答。

Answer 1

好的，最后这很简单。 ajax请求比您预期的要快。因此，在请求完成时，您在ajaxStart中隐藏或显示的数据未被完全处理。所以你在ajaxStop函数中所做的事情正在被你之前在ajaxStart中调用的show / hide函数的结尾搞乱。这是异步请求的陷阱。最简单的方法是添加一个setTimeout（）。

您可以在此处查看工作解决方案jsfiddle。

$(document).on({
  ajaxStart: function() { 
                    $(".content").fadeOut("slow");
                    $(".loading").show();
  },
  ajaxStop: function() {
      setTimeout(function() { 
                     $(".loading").fadeOut("slow");
                     $(".content").show("slow");     
                  }, 1500);                                        
  }    
});

Answer 2

在ajax调用之前调用此方法

$(".loading").show().css("display", "block");

成功或错误隐藏加载。

$(".loading").hide().css("display", "none");

显示/隐藏jQuery不适用于Ajax

2 个答案: