title: How to show loading image while tab content is loading?
body: <p>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.</p>
  
  <pre><code>&lt;apex:page standardController="Account" extensions="TempExt" id="pg"&gt;
  
    &lt;link rel="stylesheet" href="http://jqueryui.com/themes/cupertino/jquery.ui.all.css"/&gt;
    &lt;script src="http://jqueryui.com/jquery-1.7.2.js"&gt;&lt;/script&gt;
    &lt;script src="http://jqueryui.com/ui/jquery.ui.core.js"&gt;&lt;/script&gt;
    &lt;script src="http://jqueryui.com/ui/jquery.ui.widget.js"&gt;&lt;/script&gt;
    &lt;script src="http://jqueryui.com/ui/jquery.ui.tabs.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="http://jqueryui.com/demos/demos.css"/&gt;
  
    &lt;script src="/soap/ajax/10.0/connection.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="/soap/ajax/10.0/apex.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;link  rel="stylesheet" type="text/css" href="{!URLFOR($Resource.YU,'YU/build/container/assets/container.css')}"&gt;&lt;/link&gt;
    &lt;script type="text/javascript" src="{!URLFOR($Resource.jquery,'Jquery.js')}"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" src="{!URLFOR($Resource.Jeditable,'jeditable.js')}"&gt;&lt;/script&gt;
  
    &lt;style&gt;
      .rich-tabpanel-content{background:none;}
    &lt;/style&gt;
  
    &lt;script language="javascript" &gt;
      $(function () {
        $("#tabs").tabs({
          ajaxOptions : {
            error : function (xhr, status, index, anchor)
            {
              $(anchor.hash).html();
            }
          }
        });
      });
    &lt;/script&gt;
  
    &lt;div class="demo"&gt;
  
      &lt;div id="tabs"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="/apex/page1?id={!record.Id}"&gt;tab1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/apex/page2?id={!record.Id}"&gt;tab2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/apex/page3?id={!record.Id}" &gt;tab3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/apex/page4?id={!record.Id}" &gt;tab4&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;&lt;!-- End demo --&gt;
  
  &lt;/apex:page&gt;
  </code></pre>