jquery - jquery 旋转循环直到 load() 函数完成

Question

在我网站的 index.php 页面上，我有一个过滤器选项列表，用户可以单击该列表来缩小结果范围。单击其中一个

标签，jquery 将使用另一个名为 index_backend.php 的文件中生成的内容填充 div 的内容。

我的代码如下

$("#scores").click(function() {
    var url = 'index_backend.php';
    var data = 'type=scores';

    $('#center').load(url, data);
});

但是，根据 url 中 $_GET['type'] 变量的值，加载 index_backend.php 文件可能需要很长时间。有什么方法可以找出文件何时完全加载？我试着把

$(document).ready(function () {
    $(".loading").fadeOut('slow');
});

在 index_backend.php 文件中，但这不起作用。有任何想法吗？

Answer 1

$('#center').load(url, data, function() {
  $('.loading').fadeOut('slow');
});

文档

您甚至可以通过添加错误处理程序来更疯狂地检测页面是否加载成功：

$("#center").load(url, data, 
    function (responseText, textStatus, req) {
        if (textStatus == "error") {
          alert("Oh bother!!!!");
        } else {
          $('.loading').fadeOut('slow');
        }
});

更新

你可以在这里得到很好的加载图标。

要使用，请创建一个图像元素：

<a class="loading" href="loading.gif" style="display:none">

这将是你的 JS：

$("#scores").click(function() {
    $('.loading').fadeIn('fast');
    var url = 'index_backend.php';
    var data = 'type=scores';
    $('#center').load(url, data, function() {
      $('.loading').fadeOut('slow');
    });
});

Answer 2

如 api http://api.jquery.com/load/中所述，使用完整的回调。

$('#center').load(url, data, function() {
    // load complete
});