how to add a jquery load.gif during in jquery.load process?

Question

I want to use use jQuery.load() to load some content. How do I add a spinner during the load process?

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

Answer 1

Assuming you have a hidden spinner somewhere on your page:

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

you could use the $.ajaxSetup function to set global options. So for example you could do this:

$(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');
    });
});

Now whenever you issue an AJAX request with one of the methods jQuery offers for this purpose like the spinner will shown before the request and hidden once the request completes (with success or error).

Answer 2

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