jQuery Mobile: загрузка сообщения не появляется - PullRequest
Новая
       34

jQuery Mobile: загрузка сообщения не появляется

3 голосов
/ 28 сентября 2011

Я сделал веб-приложение, используя jQuery Mobile, jQuery и html.Это в основном 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 после ее заполнения.

Я запускаю загрузкусодержание неправильного события для эффекта, который я хочу, если да, какое событие я должен использовать?

РЕДАКТИРОВАТЬ 30/09/2011

Мне удалосьполучить переход страницы, чтобы дождаться полной загрузки списка, прежде чем он перейдет, однако сообщение о загрузке по-прежнему не отображается.

Я использовал: 

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

вместо документа готов и.click

и я использовал: 

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

вместо .get()

Ответы [ 2 ]

3 голосов
/ 23 июня 2012

Хотя уже есть принятый ответ, я хотел добавить, что у меня возникла та же проблема, и я решил переместить вызов showPageLoadingMsg из pagebeforeshow в обработчик pageshow. Надеюсь, это поможет

0 голосов
/ 07 октября 2011

Участник на форуме github-jQM предложил следующий обходной путь, который мне помог. Обратите внимание, я использую jQM 1.0b1.

$ ('. Ui-loader h1'). Text ('моя пользовательская загрузка msg ..');

Ссылка: https://github.com/jquery/jquery-mobile/issues/1178

...