2

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

$("#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 毫秒时才会显示这种加载方式。我发现加载进出非常快，这使得快速页面加载变得不稳定。

4

2 回答 2

3

使用以下 jQuery：

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

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

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

于 2012-07-31T14:05:32.523 回答
1

尝试这个

$("#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
           });
      });
   });    
});
于 2012-07-31T14:05:17.733 回答