jqm+backbone.Js+require.Js 在页面加载前显示加载信息答案

【问题标题】：jqm+backbone.Js+require.Js show loading message before page loadjqm+backbone.Js+require.Js 在页面加载前显示加载信息
【发布时间】：2013-05-02 11:42:55
【问题描述】：

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

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

$.mobile.showPageLoadingMsg="loading";}

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

【问题讨论】：

标签： jquery html jquery-mobile backbone.js requirejs

【解决方案1】：

通常的方法对你没有帮助，因为 jQuery Mobile 仅当页面加载到 DOM 超过 10 毫秒时才会显示加载器，即使这样当页面加载到 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/

【讨论】：

感谢 code.cool 该代码适用于简单页面，但我使用的是主干，仅适用于单个页面，但不适用于其他页面。有什么建议吗？
首先，您能否检查一下页面事件是否在其他页面上触发？我们需要找出ajax加载器的页面事件或函数是否有问题。
问题是加载器在第一页关闭，而不在其他页面。如果我按下下一页上的刷新按钮，加载程序就会关闭。有什么建议吗？

【解决方案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);       });

但加载消息没有响起:(

【讨论】：

如果看一下，在关闭过程中你试图再次显示它，而不是隐藏它。用这一行显示它： $.mobile.showPageLoadingMsg(true) 并用这个隐藏它： $.mobile.hidePageLoadingMsg();
我为您创建了一个与 jQM 1.1 兼容的示例：jsfiddle.net/Gajotres/qx7Yn