Показывать загрузчик анимации при загрузке страницы

Question

Я хочу показать загрузчик анимации на странице JQueryMobile, которая загружается без AJAX.

Страница загружена data-ajax="false" или же rel="external"

Я примеряла pagebeforecreate а также pageshow событие, но оно не работает, как я ожидал:

$( '#page' ).live( 'pagebeforecreate',function(event){
    $.mobile.loading('show');
});

$( '#page' ).live( 'pageshow',function(event){
    $.mobile.loading('hide');
});

Answer 1

Есть небольшая проблема с вашим запросом.

Во-первых, вы не сможете показать / скрыть загрузчик ajax без установленного интервала. Есть только одна ситуация, когда это возможно без, и это во время события pagehow. В любом другом случае set interval необходим для запуска загрузчика.

Вот рабочий пример: 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.

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

$.mobile.loading('hide');