How to show loading image while tab content is loading?

Question

how to show a loading image before my tab content become visible on the screen??? I have put 4 tab in my visualforce page. Now problem is that when i click on a tab it takes much time so i want to show a loading image before my tab contents appear on screen. I have make my tab using jquery. I am providing my code here. so please help me in this problem. thank you.

<apex:page standardController="Account" extensions="TempExt" id="pg">

  <link rel="stylesheet" href="http://jqueryui.com/themes/cupertino/jquery.ui.all.css"/>
  <script src="http://jqueryui.com/jquery-1.7.2.js"></script>
  <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
  <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
  <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"/>

  <script src="/soap/ajax/10.0/connection.js" type="text/javascript"></script>
  <script src="/soap/ajax/10.0/apex.js" type="text/javascript"></script>
  <link  rel="stylesheet" type="text/css" href="{!URLFOR($Resource.YU,'YU/build/container/assets/container.css')}"></link>
  <script type="text/javascript" src="{!URLFOR($Resource.jquery,'Jquery.js')}"></script>

        <script type="text/javascript" src="{!URLFOR($Resource.Jeditable,'jeditable.js')}"></script>

  <style>
    .rich-tabpanel-content{background:none;}
  </style>

  <script language="javascript" >
    $(function () {
      $("#tabs").tabs({
        ajaxOptions : {
          error : function (xhr, status, index, anchor)
          {
            $(anchor.hash).html();
          }
        }
      });
    });
  </script>

  <div class="demo">

    <div id="tabs">
      <ul>
        <li><a href="/apex/page1?id={!record.Id}">tab1</a></li>
        <li><a href="/apex/page2?id={!record.Id}">tab2</a></li>
        <li><a href="/apex/page3?id={!record.Id}" >tab3</a></li>
        <li><a href="/apex/page4?id={!record.Id}" >tab4</a></li>
      </ul>
    </div>

  </div><!-- End demo -->

</apex:page>

Answer 1

Adding more options to your ajaxOptions will allow you to hide and show a loader depending on the the route of the AJAX call.

$(function() {
    $("#tabs").tabs({
        ajaxOptions: {
            error: function(xhr, status, index, anchor) {
                $(anchor.hash).html();
            },
            beforeSend: function() {
                $('#loader').show();
            },
            complete: function() {
                $("#loader").hide();
            }
        }
    });
});​

And then you can create/style the loader on the page:

<div id="loader" style="display:none">Loading...</div>

see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings for more options