Question

I’m using this to load events dynamically without a page refresh, but there’s a bit too much time on the load so for better UX I thought we should add ‘loading events’ or similar but my attempts have been in vain so far.

function calendarAjax () {

    $('#month_nav a').live('click', function() {
        $('#events_container').animate({ opacity: "0" }, 200 ).load($(this).attr('href')+' #events_content' , function(){
            $(this).animate({ opacity: "1" }, 600 );
        });
        return false;
    })

};

Any assistance very much appreciated.

Thanks.

Answer 1

There are couple of ways, here’s a global loading image/text code using $ajaxStart and $.ajaxStop

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    });

Assuming your loading div’s ID is loadingDiv which contains either text or loading image.

Update

$.load is a jQuery Shorthand method which like several others e.g. $.post, $.get, $getJSON, $.getScript uses the $.ajax function under the hood.

$.ajaxStart is a way to register a callback to be executed when the first ajax request starts and
$.ajaxStop is used the same way to register a callback to be executed when all ajax request completes

So if you use the above code to show and hide a loading div, it will automatically show that loading text/image when your $.load function’s ajax request starts and hide when the ajax request completes, assuming you have only one $.ajax or $.ajax shorthand method in that page.