jquery - 带有 jQ​​uery mobile 的 mvc4 - 导航到页面时显示加载图像（链接或回发）

Question

当页面正在加载时，jQuery mobile 会执行漂亮的页面加载动画，但是对于数据量很大的页面，用户仍然可以暂时看到一个“白色”页面，直到显示新加载的页面。为了摆脱这种情况，我正在使用以下代码：

$.mobile.loading( 'show', {
text: 'foo',
textVisible: false,
theme: 'a',
html: ""
});

尽管如此，我仍然看到白页。有没有办法在实际页面加载之前在白页上显示动画？我喜欢http://www.amerimark.com网站在单击左侧导航按钮时显示加载消息的方式。

Answer 1

这是一个工作示例：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 加载计数。

我的示例不会显示加载器，因为它是一个非常简单的示例，并且 pageshow 事件几乎会立即触发。但是，如果您评论此行，您可以看到它是有效的示例：

$.mobile.loading('hide');

在您的情况下，它应该可以工作，因为 pageshow 事件将被延长直到页面加载。