javascript - 包装所有 AJAX 调用 jQuery

Question

我使用

填充我网站的许多部分

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

其中/some/api/call.php 返回构建列表、div 或其他一些 HTML 结构以直接放入我的目标 div。最近互联网运行缓慢，我注意到单击按钮(启动这些 API 调用)和填充 div 之间的时间为几秒钟。是否有一种简单的方法来全局包装所有加载调用，以便在调用之前显示包含“正在加载...”的 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 毫秒时才会显示这种加载方式。我发现加载飞入飞出的速度非常快，这让快速页面加载变得有些不稳定。

Answer 1

使用以下 jQuery:

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

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

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