CODEWITHSUNDEEP
jquery
yuli chika
yuli chika

Reputation: 9221

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

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

load.gif

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

Upvotes: 2

Views: 13282

Answers (2)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038930

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).

Upvotes: 9

rucsi
rucsi

Reputation: 516

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

Upvotes: 8

Related Questions