包装所有AJAX调用jQuery

Question

我使用填充网站的许多部分

$("#theDivToPopulate").load("/some/api/call.php", callBackToBindClickEventsToNewDiv);

/some/api/call.php返回一个内置列表，div或其他一些HTML结构，以直接放置到我的目标div中。 互联网最近运行缓慢，我注意到从单击按钮（启动这些API调用）到div填充之间的时间为几秒钟。 有没有一种简便的方法可以全局包装所有加载调用，以便在进行调用之前显示包含“ Loading ...”的div，并在API调用完成后将其隐藏。

我不能简单地将代码隐藏以将div隐藏到callBackToBindClickEventsToNewDiv中，因为某些加载事件具有不同的回调。 我必须将代码复制到每个函数中，这很丑陋，无法达到目的。 我希望任何.load的流程如下：

 1) dispplayLoadingDiv()
 2) Execute API call
 3) Hide loading div
 4) do callback function.

加载div必须先隐藏，因为回调包含一些动画，以很好地将新加载的div带入。

编辑：扩展jacktheripper的答案：

var ajaxFlag;
$(document).ajaxStart(function(){
    ajaxFlag = true;
    setTimeout(function (e) {
        if(ajaxFlag) {
            hideAllDivs();
            enableDivs(['loading']);
        }
    }, 500);

}).ajaxStop(function(){
    ajaxFlag = false;
    var load = $("#loading");
    load.css('visibility','hidden');
    load.css('display','none');
    load.data('isOn',false);
});

仅当页面需要500多个MS才能加载时，才会显示这种加载方式。 我发现加载飞快地进出，对于快速的页面加载来说，真正的快使得事情变得不稳定。

Answer 1

使用以下jQuery：

$(document).ajaxStart(function(){ 
    $('#loader').show(); 
}).ajaxStop(function(){ 
    $('#loader').hide();
});

您有一个名为#loader的元素，其中包含要在执行AJAX请求时显示的内容。 它可以是带有文本，图像（例如gif）或任何类似内容的跨度。 元素应最初设置为display: none

您甚至不需要在其他任何地方调用该函数。

Answer 2

尝试这个

$("#someButtonId").click(function(e){
   e.preventDefault();
   $("#theDivToPopulate").html("Loading...");
   $.get("/some/api/call.php",function(data){
       $("#theDivToPopulate").fadeOut(100,function(){
           $("#theDivToPopulate").html(data).fadeIn(100,function(){
               //Do your last call back after showing the content
           });
      });
   });    
});