Я сделал веб-приложение, используя 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 сентября 2011 г.
Мне удалось заставить переход страницы ждать, пока список не будет полностью загружен, прежде чем он перейдет, однако сообщение о загрузке все еще не появляется.
Я использовал:
$('#news').live('pagebeforeshow',function(event){
$.mobile.showPageLoadingMsg();
вместо документа готов и .click
и я использовал:
$.ajax({
url: 'http://wiiuandmii.com' + url + 'feed/',
async: false,
success:function(data){
вместо .get()
