Question

我使用

填充了我网站的很多部分

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

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

我不能简单地将代码隐藏到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
           });
      });
   });    
});

包装所有AJAX调用jQuery

2 个答案: