jquery - 如何在加载选项卡内容时显示加载图像？

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>

参见http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings更多选择