jquery - 如何在 jquery.load 过程中添加 jquery load.gif？

Question

我想使用jQuery.load()来加载一些内容。如何在加载过程中添加微调器？

$("#content").load("b.php #abc");

Answer 1

假设您的页面上有一个隐藏的微调器:

<img src="/spinner.gif" id="spinner" alt="loading..." style="display: none;" />

您可以使用$.ajaxSetup设置全局选项的函数。例如，您可以这样做:

$(function() {
    // set global ajax options:
    $.ajaxSetup({
        beforeSend: function(xhr, status) {
            // TODO: show spinner
            $('#spinner').show();
        },
        complete: function() {
            // TODO: hide spinner
            $('#spinner').hide();
        }
    });

    $('#foo').click(function() {
        // because we have overriden the global AJAX settings
        // the spinner will be shown during the request
        $('#content').load('b.php #abc');
    });
});

现在，每当您使用 jQuery 为此目的提供的方法之一发出 AJAX 请求时，例如微调器将在请求之前显示，并在请求完成后隐藏(成功或错误)。