jQuery Mobile：加载消息未出现答案

【问题标题】：jQuery Mobile: Loading Message not appearingjQuery Mobile：加载消息未出现
【发布时间】：2012-06-23 16:10:46
【问题描述】：

我使用 jQuery Mobile、jQuery 和 html 制作了一个 Web 应用程序。它基本上是其网站的 RSS 阅读器。

$(document).ready(function() {
$('[data-role=button]').click(function() {
    var $id = $(this).attr('id');
    switch($id)
    {
        case 'news-button':
        var type = 'news';
        var url = '/tag/news/';
        break;
        //etc...
    }
    $.get('http://wiiuandmii.com' + url + 'feed/', function(data) {
        $('#' + type + '-content').empty();
        var i = 0;
        $(data).find('item').each(function() {
            i = i + 1;
            $('#' + type + i).empty().remove();
            var $item = $(this);
            var html = '<li>';
            html += '<a href="#'+ type + i + '">';
            html += $item.find('image').text();
            html += '<h3 style="color: #01acca;">' + $item.find('title').text() + '</h3>';
            html += '<p>' + $item.find('pubDate').text() + '</p>';
            html += '</a>';
            html += '</li>';
            $('#' + type + '-content').append($(html));
            $('#' + type + '-content').find('img.attachment-thumbnail').removeClass().removeAttr('width').removeAttr('height');
            $('#' + type + '-content').listview('refresh');
            var page = '<div data-role="page" id="' + type + i + '" data-url="' + type + i + '">';
            page += '<div data-role="header" data-theme="c" data-position="fixed"><a href="#home" data-rel="back" data-theme="b" data-icon="arrow-l">Back</a><h1 style="margin-top:0px; margin-bottom:0px;"><img src="images/header.png" title="Wii U and Mii" alt="Wii U and Mii"/></h1></div>';
            page += '<div data-role="content" data-theme="c" class="main-' + type + i + '">';
            page += '<h1 style="color: #01acca;">' + $item.find('title').text() + '</h1>';
            page += '<p>' + $item.find('dc:creator').text() + '</p>';
            page += $item.find('desc').text();
            page += '</div>';
            page += '<div data-role="footer" data-theme="c"></div>';
            page += '</div>';
            $('body').append($(page));
            var test = '#' + type + i;
            $(test).page();
        });
    });
});
});

当点击主页上的按钮时，页面会跳转到#news 页面就好了。问题是，#news 页面的内容部分在加载内容时保持空白约 5 秒。加载消息不会出现。应该发生的是加载消息应该出现在#home页面上，同时所有内容都加载完毕，然后在它被填充后转换到#news页面。

我是否为我想要的效果触发了错误事件的内容加载，如果是，我应该使用哪个事件？

于 2011 年 9 月 30 日编辑

我已经设法让页面转换等到列表完全加载后再转换，但是加载消息仍然没有出现。

我用过：

$('#news').live('pagebeforeshow',function(event){
    $.mobile.showPageLoadingMsg();

而不是准备好文档和.click

我用过：

$.ajax({
    url: 'http://wiiuandmii.com' + url + 'feed/',
    async: false,
    success:function(data){

而不是.get()

【问题讨论】：

您明确设置加载消息对吗？如果是这样，你能提供你的代码吗？如果没有，那么您可能需要在点击处理程序中执行此操作。
如何加载内容？您是否在做一些聪明的事来填充新闻页面？
使用 .get()，我编辑了其余的代码，抱歉我应该早点添加它
我尝试在函数的开头和结尾添加：$.mobile.pageLoading(true/false)，但在这种情况下似乎不起作用。
我有同样的问题。你发现问题了吗？

标签： jquery jquery-mobile iphone-web-app

【解决方案1】：

虽然已经有一个公认的答案，但我想补充一点，我遇到了同样的问题，我解决了将 showPageLoadingMsg 调用从 pagebeforeshow 移动到 pageshow 处理程序的问题。希望这会有所帮助

【讨论】：

【解决方案2】：

github-jQM 论坛上的一位成员建议了以下对我有用的解决方法。注意，我使用的是 jQM 1.0b1。

$('.ui-loader h1').text('我的自定义加载消息..');

参考：https://github.com/jquery/jquery-mobile/issues/1178

【讨论】：