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了解更多选项

如何在加载标签内容时显示加载图像？

1 个答案: