如何在jquery选项卡内容加载前显示“加载中”？

Question

我正在使用jquery UI标签页，加载到标签页中的内容位于另一页。因此它通过ajax加载。页面加载期间存在一些延迟，在此期间屏幕上的标签内容区域是完全空白的。有没有办法在内容加载完成之前显示一些信息，比如“加载中...”？

我的代码是：

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs();
    });
</script>

            <div id="tabs">
                <ul>
                    <li><a href="/failedPrescreenReport.jsp</a></li>
                    <li><a href="/failedverificationreport.jsp</a></li>
                    <li><a href="VerificationReport.action</a></li>
                </ul>
            </div>

我尝试使用此插件的spinner选项，但似乎对我无效...(可能是我的css出了问题)

- Omnipresent

Answer 1

无需进行额外的操作，只需在锚点内部添加span标签即可。我认为这在jQuery的文档中被忽略了。

示例：

<script type="text/javascript">
    $(function(){
        $("#tabs").tabs();
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="/failedPrescreenReport.jsp"><span>Tab 1</span></a></li>
        <li><a href="/failedverificationreport.jsp"><span>Tab 2</span></a></li>
        <li><a href="VerificationReport.action"><span>Tab 3</span></a></li>
    </ul>
</div>

span标签是重要的部分。

- Khashayar

---

只是想补充一下，这个方法可以运行，但它会在选项卡本身而不是选项卡的内容区域中显示“正在加载…”或spinner值。 - J Cobb

Answer 2

我建议监听jQuery的ajaxStart、ajaxStop和ajaxError事件，在ajaxStart事件上显示“正在加载”的弹出窗口，在ajaxStop和ajaxError事件上隐藏它。这样，只需进行少量编程，你的加载弹出窗口就会在任何ajax请求挂起时显示。

例如：

$(function() {
  $(this).ajaxStart(function() {
    $("#ajaxLoading").show(); });
  $(this).ajaxStop(function() {
    $("#ajaxLoading").hide(); });
 });

- Karmic Coder

---

+1 - 这是相当标准的做法，我相信。如果你给你的函数命名，并传递“加载”元素的名称，你可以在多个页面上重复使用这个函数。 - Jason

#Karmic..这是做这件事的完美方式。+1 - Sai Avinash

Answer 3

我最好的操作是针对ajax驱动标签只是这个...希望你会喜欢这个答案

$("#facilityTabContainer").tabs({ panelTemplate:"正在加载...", selected : 0, scrollable : true, cache : false });

而且您甚至可以修改jquery.ui.tabs中的panelTemplate，以便应用程序中的所有选项卡都自动获取'加载文本或图像'。猜猜它还解决了您的第一个选项卡加载问题。

- Satishchandra Pandey

Answer 4

最近刚写了一个jquery插件，可能会有所帮助。它可以在元素上放置一个带有旋转图标的遮罩层，因此在进行ajax调用时，您可以在调用之前显示遮罩层，并在回调函数中取消遮罩层。

- serg

Answer 5

jQuery blockui非常适合这种情况。是一种非常快速、优雅的解决方案。

- Kris Erickson

Answer 6

blockUI很好，但我敢打赌http://plugins.jquery.com/project/loading更适合这种情况。

- Nathan Bubna