Question

当我尝试使用changePage("$('#page-id')", { transition: "none" });从一个页面导航到另一个页面（单页模板）时，如何显示 JQM加载消息？

截至目前，我在更改页面发生之前调用$.mobile.loading("show");。

我已经尝试了this和this中的方法，但它仍然无效。我在点击源页面中的按钮时使用changePage。上述链接中提供的方法仅适用于FF。无法在Android，iOS原生浏览器以及Chrome或Safari上使用。

哦，我正在使用JQM v1.2.0稳定版。

修改使用

继承代码

$(".listview").live("click", function () {
     $.mobile.loading('show', {
        text: 'Please wait... Loading...',
        textVisible: true,
        theme: 'a',
        textonly: true
    });
    var v1= $(this).attr("v1");
    //var CourseID = "";
    var v2= $(this).attr("v2");
    var v3= $.trim($(this).children("h3").text());
    var v4= $.trim($(this).find("span").children("span:first").text());
    var v5= $.trim($(this).children("p:last").text());
    $.ajax({
            async: false,
            type: "POST",
            url: "//url of the webmethod//",
            data: "{v1:" + v1+ ", p:" + id + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (msg) {
                ViewModel.variable1({ //binding data to ViewModel here//
                });
                $.mobile.changePage("#course-pg", { transition: "none" });
            },
            error: function (msg) {
                $("#errorpopup").popup('open');
            },
            complete: function () {
                $.mobile.loading('hide');
            }
        });
});

Answer 1

我也一直在思考这个问题。

事情是，你可能正在做所有事情，调用微调器，调用changePage，......问题是（在我看来），微调器只显示while the page is loading而不显示while the loaded page is rendering。假设您加载了一个2k的gzip压缩页面，实际加载速度太快，甚至无法看到微调器。根据正在加载的小部件，增强需要相当长的时间，因此您的微调器对于少量ms页面加载是可见的，但不适用于页面渲染的2-3 seconds。

我正在使用我自己的微调器调用（JQM 1.1）：

var spin = 
    function( what ){
        if ( what == "show"){
            console.log("SHOWIN");
            $.mobile.showPageLoadingMsg();
            } else {
            console.log("HIDING");
            $.mobile.hidePageLoadingMsg()
            }
        };

将此代码放入您的代码中，并在进行changePage调用之前手动触发：

 spin("show");

并且在回调中，或者之后使用的任何处理程序，

 spin("hide");

这可以让您了解微调器何时显示以及何时离开。

如果您想知道，我希望微调器在渲染过程中显示。这会更有用，但我不确定这是否可行。

Answer 2

我终于找到了解决这个问题的方法。它实际上是非正统的，我不知道为什么这是唯一的方法。无论如何，这里去了。我创建了一个锚点标记，href设置为第二页并使用css隐藏它。

<a href="#page-id" id="linktonext" style="display:none">Click here</a>

我首先拥有$.mobile.loading("show");，并且在ajax调用获取数据后，会触发点击此锚标记。在第二页的pageinit上，我用ajax调用中的数据填充页面。在此之后，我致电$.mobile.loading("hide")。完美的工作。

更改期间jquery移动加载消息（）

2 个答案: