탭 내용을로드하는 동안 이미지로드하는 방법?

Question

내 탭 콘텐츠가 화면에 표시되기 전에 로딩 이미지를 표시하는 방법 ??? Visualforce 페이지에 4 탭을 넣었습니다. 이제 문제는 탭을 클릭하면 탭 콘텐츠가 화면에 표시되기 전에 로딩 이미지를 표시하기 위해 많은 시간이 소요된다는 것입니다. jquery를 사용하여 내 탭을 만들었습니다. 여기에 내 코드를 제공하고 있습니다. 제발이 문제를 도와주세요. 감사합니다.

<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

ajaxOptions에 더 많은 옵션을 추가하면 AJAX 호출 경로에 따라 로더를 숨기거나 표시 할 수 있습니다.

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

그리고 당신은/스타일을 페이지의 로더 만들 수 있습니다

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

이