CODEWITHSUNDEEP
jquery
weinerk
weinerk

Reputation: 522

show()/hide() to put up a busyloading spinner

Problem with show()/hide() to put up a busyloading spinner.

This does not work:

<div id="spinner" class="spinner" style="display:none;">
  <img src="busyloading.gif">
</div>


$('#spinner').show();

//some busy task here
for (i=0;i<=10000;i++){
    i++;
}

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

In the end I got it working with jQuery.ajaxSetup, but I still would like to figure out why it was not working with regular show/hide:

jQuery.ajaxSetup({   
    beforeSend: function() {   
        $('#spinner').show()   
    },
    complete: function(){   
        $('#spinner').hide()   
    },   
});

Additional info: seems like there is a difference in chrome vs firefox: At least in FireFox if I add an alert() before the loop - the spinner shows up. In Chrome - even if I add alert() - there is no spinner.

Upvotes: 0

Views: 1289

Answers (1)

mariogl
mariogl

Reputation: 1295

If your "busy task" is being called by ajax, your code will continue executing as ajax is asynchronous. That's why you have to use callback functions to execute code when ajax call is complete.

Upvotes: 1

Related Questions