在加载页面时显示加载动画微调器

本文介绍了在加载页面时显示加载动画微调器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想在加载了ajax的JQueryMobile页面中显示加载动画微调器.

I want to show loading animation spinner in a JQueryMobile page which is loaded w/ ajax off.

该页面加载了data-ajax="false"或rel="external"

我尝试了pagebeforecreate和pageshow事件，但是它没有按我预期的那样工作:

I tried on pagebeforecreate and pageshow event but its NOT working as I expected:

$( '#page' ).live( 'pagebeforecreate',function(event){ $.mobile.loading('show'); }); $( '#page' ).live( 'pageshow',function(event){ $.mobile.loading('hide'); });

推荐答案

您的请求有一个小问题.

There's a slight problem with your request.

首先，如果没有设置时间间隔，您将无法显示/隐藏ajax加载程序.只有在一种情况下，如果没有这种情况，这是可能的，那就是在pageshow事件期间.在任何其他情况下，都需要setinterval才能启动加载程序.

First, you will not be able to show/hide ajax loader without set interval. There's is only one situation where this is possible without and that is during the pageshow event. In any other case setinterval is needed to kickstart to loader.

这是一个工作示例: jsfiddle/Gajotres/Zr7Gf/

Here's a working example: jsfiddle/Gajotres/Zr7Gf/

$(document).on('pagebeforecreate', '#index', function(){ var interval = setInterval(function(){ $.mobile.loading('show'); clearInterval(interval); },1); }); $(document).on('pageshow', '#index', function(){ var interval = setInterval(function(){ $.mobile.loading('hide'); clearInterval(interval); },1); });

但是这里我们有一个不同的问题，除非您的页面足够复杂，否则将非常快速地加载新页面. jQuery mobile具有内部计时器，用于查看将页面加载到DOM中的速度.如果页面很复杂，并且加载时间超过10毫秒，则无论您如何努力，加载器都会显示加载器，而在任何其他情况下都不会显示加载器.

But here we have a different problem, unless your page is complex enough new page will be loaded very fast. jQuery mobile has internal timer that looks how fast page is loading into the DOM. If page is complex and loading takes more then 10 ms it will display the loader in any other case loader will not be shown, no matter how hard you try.

还要注意，只有DOM加载会计入这10毫秒.页面样式已超出计算范围.因此，无论页面加载看起来是否只有DOM加载次数更长.

Also take notice that only DOM loading will count into that 10 ms. Page styling is out of calculation. So no matter if page loading looks longer only DOM loading counts.

我的示例不会显示加载程序，因为它是一个非常简单的示例.但是，如果您对此行发表评论，您可以看到它是有效的示例:

My example will not show loader because it is a very simple example. But you can see it is working example if you comment this line:

$.mobile.loading('hide');