How do I show a clicker while processing a javascript function?

Question

I have a radio button that when clicked, performs a function that mounts a datepicker.

But the function mountDatepicker is only loaded after a few seconds, after consulting the three Apis to then mount the calendar.

So how do I load an image with a Upload instead of the calendar while the function is not finished?

$("input[type='radio']").click(function(){
    if ($("input[name='diasaluguel']:checked").length > 0 ) {

    mountDatepicker();

    }
});

Answer 1

function addLoader(el) {
    var gif = 'http://1.bp.blogspot.com/-Atj4ze_I-84/UeJk-CPeCsI/AAAAAAAAHno/UIbSZkTfWBA/s1600/loading.gif';
    var img = document.createElement('img');
    img.src = gif;
    el.innerHTML = '';
    el.appendChild(img);
}

Create a function to be run before mountDatepicker(); be called. You can do it differently: as I suggest, or already having in HTML a div that overlaps the calendar.

As I did it adds an element img to the calendar and then remove.

Example: http://jsfiddle.net/Sergio_fiddle/uxL5h57w/