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

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?

我正在使用jquery UI选项卡,并且加载到选项卡的内容位于另一个页面上。所以它是通过ajax加载的。页面加载之间存在一些延迟,在此期间,选项卡内容将加载的部分屏幕是完全空的。有没有办法在内容加载之前显示一些消息,例如'loading ....'?

My code is:

我的代码是:

<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>

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)

我试过使用这个插件的微调器选项,但这对我来说似乎没有用...(也许我的css搞砸了)

6 个解决方案

#1

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.

我建议听一下jquery ajaxStart,ajaxStop和ajaxError事件,在ajaxStart上显示你的“加载”弹出窗口,将它隐藏在AjaxStop和ajaxError上。这样,只要ajax请求处于挂起状态而没有任何其他编程,您的加载弹出窗口就会显示。

For example:

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

#2

There's no need to do extra stuff, just add span tag insdie your anchors. i think it's missed in jQuery's documentation.

没有必要做额外的东西,只需添加span标签insdie你的锚点。我认为它在jQuery的文档中遗漏了。

example:

<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 tags are the important part.

span标签是重要的部分。

#3

Just wrote jquery plugin recently that might be helpful. It puts a mask with a spinner over an element, so for your ajax calls you can display the mask before your calls and unmask it in a callback function for example.

刚刚写了jquery插件,可能会有所帮助。它将一个带有微调器的掩码放在一个元素上,因此对于你的ajax调用,你可以在调用之前显示掩码,并在回调函数中取消屏蔽它。

#4

The jquery blockui is perfect for this. A very quick, elegant solution.

jquery blockui非常适合这种情况。一个非常快速,优雅的解决方案

#5

blockUI is great, but i'd wager http://plugins.jquery.com/project/loading is a better fit for the situation.

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

#6

Best Thing I did was just this for ajax driven tabs...Hope you will love this answer

我做的最好的事情就是这个用于ajax驱动的标签...希望你会喜欢这个答案

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

$(“#facilityTabContainer”)。tabs({panelTemplate:“Loading ...”,selected:0,scrollable:true,cache:false});

and you can even modify the panelTemplate in jquery.ui.tabs also so that all the tabs in you application will automatically get the 'loading text or image'. and guess what it also solves your first tab loading problem too..

你甚至可以修改jquery.ui.tabs中的panelTemplate,这样你应用程序中的所有选项卡都会自动获得“加载文本或图像”。并猜测它也解决了你的第一个标签加载问题..

#1