在Ajax期间显示/隐藏Div .load（）

Question

I would like to show the "LoaderMain" div before the .load() and when it is all complete hide the "LoaderMain". When I uncomment my show/hide it never displays.

$('#content').html('');
            //$('#LoaderMain').show();
            $("#content").load(url, function(response, status, xhr) {
            if (status == "error") {
                var msg = "Sorry but there was an error: ";
                $("#content").html(msg + xhr.status + " " + xhr.statusText);
            }

            });
            //$('#LoaderMain').hide();

Answer 1

Put $('#LoaderMain').hide(); in your callback function.

For example:

$('#content').html('');
$('#LoaderMain').show();
$("#content").load(url, function(response, status, xhr) {
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#content").html(msg + xhr.status + " " + xhr.statusText);
    }
    $('#LoaderMain').hide();
});

Answer 2

Since load is asynchronous, you'll need your hide() function inside the callback:

$('#content').html('');
$('#LoaderMain').show();
$("#content").load(url, function(response, status, xhr) {
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#content").html(msg + xhr.status + " " + xhr.statusText);
    }
    $('#LoaderMain').hide();
});

Answer 3

$("#content").load(url, function(response, status, xhr) {
   // Stuff 1
   $('#LoaderMain').hide();
});
// Stuff 2

Load is asynchronous , it means that the function Load will start, and while it runs, the script continues to stuff 2, and once the function running in background finshes, it does stuff 1. Note that if the function is very fast, stuff 1 can be done before stuff 2.

If the function was synchronous , stuff 1 would always be done before stuff 2.

That's why AJAX means Asynchronous JavaScript Xml, because it is made to run in background.

Answer 4

$('#content').html('');
        //$('#LoaderMain').show();
        $.ajax({
           url: "your.url",
           beforeSend: function() {
             //do something before sending the ajax, like hiding or showing that spinner
           },
           type: 'post', //or get if you prefer that
           data: "", // put parameters like ?id=1&name=something here
           success: function(data) {
             //do something after successful ajax request like $('#content').html(data);
           }
        });

Answer 5

What event are you using to load content with?

http://api.jquery.com/load/#callback-function

Most jquery event/ajax functions have a callback param that you can send a function to, in order to execute after the event/ajax function has complete processing.

$('#LoaderMain').show();
$('#result').load('ajax/test.html', function() {
  $('#LoaderMain').hide();
});