mvc4 with jQuery mobile - 在浏览页面时显示加载图片（链接或回传）

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手机有内部计时器，看起来页面加载到DOM的速度有多快。如果页面非常复杂并且加载时间超过10毫秒，则在任何其他情况下都会显示加载器，无论您尝试多么艰难，加载器都不会显示。

另请注意，只有DOM加载将计入该10毫秒。页面样式和转换不在计算中。因此，无论页面加载看起来是否只有较长的DOM加载次数。

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

$.mobile.loading('hide'); 

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