how to display 'loading' before content from jquery tabs is loaded

Question

I am using jquery UI tabs and content loaded into the tab is on another page. so it is loading via ajax. There is some lag between the page loading during which the part of the

Answer 1

I would recommend listening to the jquery ajaxStart, ajaxStop, and ajaxError events, showing your "loading" popup on ajaxStart, hiding it on AjaxStop and ajaxError. This way, your loading popup will display whenever an ajax request is pending without any additional programming.

For example:

$(function() {
  $(this).ajaxStart(function() {
    $("#ajaxLoading").show(); });
  $(this).ajaxStop(function() {
    $("#ajaxLoading").hide(); });
 });