如何在加载来自jquery选项卡的内容之前显示“正在加载" [英] how to display 'loading' before content from jquery tabs is loaded

问题描述

我正在使用jquery UI选项卡，并且加载到该选项卡中的内容在另一页上.因此它是通过ajax加载的.在页面加载之间存在一定的延迟，在此期间，屏幕上将加载选项卡内容的部分完全为空.在内容加载之前，有什么方法可以显示诸如加载中..."之类的消息吗?

I am using jquery UI tabs and content loaded into the tab is on another page. so it is loading via ajax. There is some lag between the page loading during which the part of the screen where tab content will load is completley empty. Is there a way I can show some message like 'loading....' until the content loads?

我的代码是:

<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搞砸了)

I have tried using the spinner option of this plugin but that does not seem to work for me...(maybe my css is messed up)

推荐答案

我建议听jquery ajaxStart，ajaxStop和ajaxError事件，显示ajaxStart上的正在加载"弹出窗口，将其隐藏在AjaxStop和ajaxError上.这样，只要有一个ajax请求待处理，而无需进行任何其他编程，就会显示您的加载弹出窗口.

I would recommend listening to the jquery ajaxStart, ajaxStop, and ajaxError events, showing your "loading" popup on ajaxStart, hiding it on AjaxStop and ajaxError. This way, your loading popup will display whenever an ajax request is pending without any additional programming.

例如:

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

这篇关于如何在加载来自jquery选项卡的内容之前显示“正在加载"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！