mvc4 с jQuery mobile - показывать загрузочное изображение при переходе на страницу (ссылка или постбэк)

Question

jQuery mobile выполняет приятную анимацию загрузки страницы, когда страница загружается, но для страницы, которая перегружена данными, пользователь все еще может на мгновение увидеть "белую" страницу, пока не отобразится вновь загруженная страница. Чтобы избавиться от этого, я использую следующий код:

$.mobile.loading( 'show', {
text: 'foo',
textVisible: false,
theme: 'a',
html: ""
});

Несмотря на это, я все еще вижу белую страницу. Есть ли способ показать анимацию на белой странице, пока фактическая страница не загрузится? Мне нравится, как веб- сайт http://www.amerimark.com/ отображает сообщение о загрузке, когда вы нажимаете на кнопки навигации слева.

Answer 1

Вот рабочий пример: http://jsfiddle.net/Gajotres/Zr7Gf/

$(document).on('pagebeforecreate', '#index', function(){     
    var interval = setInterval(function(){
        $.mobile.loading('show');
        clearInterval(interval);
    },1);    
});

$(document).on('pageshow', '#index', function(){  
    var interval = setInterval(function(){
        $.mobile.loading('hide');
        clearInterval(interval);
    },1);      
});

Но здесь у нас другая проблема, если ваша страница не достаточно сложна, новая страница будет загружена очень быстро. JQuery Mobile имеет встроенный таймер, который смотрит, как быстро страница загружается в DOM. Если страница сложная и загрузка занимает более 10 мс, она покажет загрузчик, в любом другом случае загрузчик не будет показан, независимо от того, как сильно вы пытаетесь.

Также обратите внимание, что только загрузка DOM будет учитываться в эти 10 мс. Стиль страницы и переходы не рассчитаны. Поэтому независимо от того, выглядит ли загрузка страницы дольше, учитывается только загрузка DOM.

Мой пример не будет отображать загрузчик, потому что это очень простой пример, и событие pagehow будет срабатывать практически сразу. Но вы можете увидеть, что это рабочий пример, если вы прокомментируете эту строку:

$.mobile.loading('hide');

В вашем случае это должно работать, потому что событие pagehow будет продлено до тех пор, пока страница не загрузится.