用多页加载图像答案

【问题标题】：Loading image with multi page用多页加载图像
【发布时间】：2013-07-23 15:16:14
【问题描述】：

我正在使用 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 中使用加载图像的正确方法是什么？

【问题讨论】：

标签： jquery-mobile cordova loading

【解决方案1】：

您的请求有一点问题。

首先，如果没有设置超时，您将无法显示/隐藏 ajax 加载器。只有一种情况下这是可能的，那就是在 pageshow 事件期间。在任何其他情况下，都需要 settimeout 来启动加载程序（至少对于 web kit 浏览器，在 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 毫秒。页面样式无法计算。因此，无论页面加载是否看起来更长，只有 DOM 加载计数。

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

$.mobile.loading('hide');

【讨论】：