CODEWITHSUNDEEP
javascriptphpjquery
user982124
user982124

Reputation: 4610

Hide loading image once page has finished loading

I have 2 php pages. The user submits a form (form.php) and the results are viewed on the next page (results.php). There can be a delay of a few seconds while the results are shown - I've added a standard spinning loader gif above where the results appear (it's showing 2 mini calendars of available dates). I would like to then hide this once the calendars have loaded.

Here's the script that gets the calendars:

$( document ).ready(function() {
$(document).on('click', '#calendar_1 .next, #calendar_2 .next', function(event){
    event.preventDefault();
    var href_link = $("#calendar_1 .next").attr("href");
    $( "#cals" ).load( href_link );
});

$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){
    event.preventDefault();
    var href_link = $("#calendar_1 .prev").attr("href");
    $( "#cals" ).load( href_link );
});

    $( "#cals" ).load( "loadCalendar.php" );
});

I'm showing the loading gif and calendars in the html as follows:

<img id="loading_spinner" src="loading_spinner.gif">

<div id="cals"></div>

I gather I need to do something like:

$('#loading_spinner').hide();

to hide the gif image but I only want to do this once the calendars have actually loaded. I can't work out the correct context or how to do this or even if it's possible.

Upvotes: 1

Views: 704

Answers (1)

mcryan
mcryan

Reputation: 1576

You can add a callback to your load() function and hide the spinner from there. This will hide it only when load() completes execution.

$(document).on('click', '#calendar_1 .prev, #calendar_2 .prev', function(event){
    event.preventDefault();
    var href_link = $("#calendar_1 .prev").attr("href");

    $( "#cals" ).load( href_link, function() {
        $('#loading_spinner').hide();
    });
});

Upvotes: 2

Related Questions