Question

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

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

我的代码如下

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

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

但是，根据$ _GET ['type']变量的值在url中，加载index_backend.php文件可能需要很长时间。有没有办法找出文件何时完成加载？我试过把

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

在index_backend.php文件中，但是没有用。有什么想法吗？

Answer 1

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

Documentation

你甚至可以通过添加错误处理程序来检查页面是否成功：

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

<强>更新

您可以获得良好的加载图标here。

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

<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
});

jquery旋转圈直到load（）函数完成

2 个答案: