Question

我正在开发一个使用Phonegap和jQuery Mobile的新应用程序。我希望当内容仍然处于“加载状态”（并且页面未完全显示）时，会出现加载图像（jqm的默认gif动画）。

我的应用是这样的多页应用：

<div data-role="page" id="page1">
<p>Some stuff for page 1 here</p>
</div>

<div data-role="page" id="page2">
<p>Some stuff for page 2 here</p>
</div>

<div data-role="page" id="page3">
<p>Some stuff for page 3 here</p>
</div>

我尝试：

$(document).on('pageshow','#page3', function(){
$.mobile.showPageLoadingMsg();

// my code

$.mobile.hidePageLoadingMsg();

});

但是没有出现加载图像

我尝试：

$(document).on('pagebeforeshow','#page2', function(){
$.mobile.showPageLoadingMsg();                         
});

和

$(document).on('pageshow','#page2', function(){

//all code

$.mobile.hidePageLoadingMsg();

});

但装载不起作用。

使用jQuery Mobile加载图像的正确方法是什么？

Answer 1

您的请求存在轻微问题。

首先，如果没有设置超时，您将无法显示/隐藏ajax加载程序。只有一种情况是没有这种情况，这是在pageshow事件期间。在任何其他情况下，settimeout需要kickstart到加载器（至少对于Web工具包浏览器，在Firefox中，它可以在盒子外工作）。

以下是一个有效的例子：http://jsfiddle.net/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毫秒，那么在任何其他情况下都会显示加载器，无论你怎么努力，都不会显示加载器。

另请注意，只有DOM加载才会计入10 ms。页面样式不计算在内。因此，无论页面加载看起来更长，只有DOM加载计数。

我的示例不会显示加载器，因为它是一个非常简单的示例。但是如果你评论这一行，你可以看到它是有效的例子：

$.mobile.loading('hide');

加载多页图像

1 个答案: