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

Question

我想使用use 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请求，如spinner将在请求之前显示，并在请求完成后隐藏（成功或错误）。

Answer 2

 $("#content").html("<img src='/images/load.gif' alt='loading...' />");
 $("#content").load("b.php #abc");