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

【问题标题】：jquery spinning circle until load() function is finishedjquery 旋转循环直到 load() 函数完成
【发布时间】：2012-08-01 08:52:25
【问题描述】：

在我网站的 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 文件中，但这不起作用。有什么想法吗？

【问题讨论】：

api.jquery.com/load 它有一个“完成”回调，当服务器响应时执行

标签： jquery loading

【解决方案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');
    });
});

【讨论】：

非常感谢。我一直使用 jquery load 函数，但从未使用过回调。现在我知道答案就是这么简单，这是一个愚蠢的问题。您知道如何在页面仍在加载时生成旋转圆圈吗？
谢谢。所有这些都有帮助。但是，我从那个网站下载了一张图片，你给了我一个链接，然后把它放在我的 img 文件夹中。但是，它没有出现。
@Lance：它没有出现在您的计算机或网页上？
Nvm。我得到了它。谢谢一堆。此功能确实为我的网站的外观和感觉增加了一个级别和复杂性。
@Lance：我也喜欢旋转东西 :)

【解决方案2】：

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

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

【讨论】：