Question

我正在使用Jquery mobile 1.1，我想在页面加载之前显示加载消息使用骨干路由器。移动初始化代码是

$(document).bind("mobileinit", function() {
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;

$.mobile.showPageLoadingMsg="loading";}

但未显示加载消息。有什么建议吗？

Answer 1

通常的方式不会对你有所帮助，因为只有当页面i加载到DOM超过10ms时，jQuery Mobile才会显示加载程序，即使这样，当页面加载到DOM时它也会隐藏。通常，如果页面很复杂，那么在页面成功显示之前就会很久。

但您可以手动显示/隐藏它。

以下是一个有效的例子：http://jsfiddle.net/Gajotres/qx7Yn/

$(document).on('pagebeforecreate', '[data-role="page"]', function(){     
    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    
});

$(document).on('pageshow', '[data-role="page"]', function(){  
    var interval = setInterval(function(){
        //$.mobile.loading('hide');
        clearInterval(interval);
    },1);      
});

基本上你要做的就是在即将创建页面时显示加载器并在pageshow事件期间隐藏它。就我而言，这一行：

//$.mobile.loading('hide');

被评论，因为页面很简单，它会在一瞬间加载。也别忘了用这个：

$.mobile.loader.prototype.options.text = "loading";
$.mobile.loader.prototype.options.textVisible = true;
$.mobile.loader.prototype.options.theme = "a";

你需要的一切都在我的jsFiddle示例中。

编辑：

此示例与jQuery Mobile 1.1兼容：http://jsfiddle.net/Gajotres/qx7Yn/

Answer 2

感谢@ Gajotres的回答，但是因为我使用的是jquery-mobile-1.1 我用

$(document).on('pagebeforecreate', '[data-role="page"]', function(){     
var interval = setInterval(function(){
    $.mobile.showPageLoadingMsg('show');
    clearInterval(interval);
},1);     }); $(document).on('pageshow', '[data-role="page"]', function(){  
var interval = setInterval(function(){
    $.mobile.showPageLoadingMsg('show');
    clearInterval(interval);
},1);       });

但是加载消息没有消失:(

jqm + backbone.Js + require.Js在页面加载之前显示加载消息

2 个答案: