changepage（）期间的jquery移动加载消息答案

【问题标题】：jquery mobile loading message during changepage()changepage（）期间的jquery移动加载消息
【发布时间】：2012-10-06 20:37:08
【问题描述】：

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

现在我在 changePage 发生之前打电话给$.mobile.loading("show");。

我尝试了this 和this 中的方法，但还是不行。我在单击源页面中的按钮时使用 changePage 。上述链接中提供的方法仅适用于 FF。不适用于 Android、iOS 原生浏览器以及 Chrome 或 Safari。

哦，我正在使用 JQM v1.2.0 stable。

编辑： 这是我正在使用的代码

$(".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');
            }
        });
});

【问题讨论】：

这很奇怪，当你自动调用 changePage() 时应该会显示加载消息...你有没有正确设置page loading widget settings？
@ZathrusWriter 是的，我有。我已将其添加到移动 init.js 中
并且您的 mobileinit 在您包含 jQuery Mobile JavaScript 文件之前位于页面上？
@ZathrusWriter 是的！我调试了我的代码，加载消息在调试器到达 changePage() 的那一刻就消失了。在移动浏览器上，在单击（将 changePage() 绑定到它）和第二个页面出现之间有一个舒适的 3 秒延迟。我希望用加载消息填充它。
对不起，如果我之前用大写字母听起来很粗鲁，只是想确定一下:) ...无论如何，这很令人费解...你认为你可以尝试使用jsfiddle 复制它吗？，所以我们有一些示例代码？

标签： jquery jquery-mobile

【解决方案1】：

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

问题是，您可能正在做所有事情，调用微调器，调用 changePage，......问题是（在我看来），微调器只显示 while the page is loading 而不是 while the loaded page is rendering。假设您加载了一个 2k 的 gzipped 页面，该页面实际上加载速度太快，您甚至看不到微调器。根据加载的小部件，增强需要相当长的时间，因此您的微调器对于页面加载的少数 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");

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

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

【讨论】：

好吧，如果我们将连接设为 wifi/3g/4g，我想你是对的。任何想法为什么当我在老式 GPRS 连接上时移动浏览器不显示它？装载机出现的速度还不够慢吗？ 疑虑：这段代码位于$(document).live("ready", function() { } 下。会不会是个问题？
这就像double no-no。 Jquery Mobile 表示不要使用 $(doc).ready 和 Jquery 表示不要使用 live。

【解决方案2】：

我终于找到了解决这个问题的方法。它实际上是非正统的，我不知道为什么这是唯一的方法。不管怎样，就到这里吧。我创建了一个将href 设置为第二页的锚标记，并使用css 将其隐藏。

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

我首先拥有$.mobile.loading("show");，在ajax 调用获取数据后，会触发单击此锚标记。在第二页的pageinit 上，我用来自ajax 调用的数据填充页面。之后，我打电话给$.mobile.loading("hide")。完美运行。

【讨论】：