Индикатор мобильной активности jQuery, не отображающийся в android

Я пытаюсь показать индикатор активности в своем приложении. Я использую activity.js для индикатора активности. Это прекрасно работает в браузере и iPhone. Но он не работает на устройствах Android.

Я не знаю, почему индикатор не работает в устройствах Android.

Вот мой пример кода для индикатора активности:

function showIndicator() {
    console.log("inside show indicator");
    applyOverLay();
    var showIndicator = document.createElement("div");
    showIndicator.setAttribute("class", "activity-indicator");
    document.body.appendChild(showIndicator);
    $('.activity-indicator').activity({
        width: 5,
        space: 1,
        length: 3,
        color: '#fff'
    });
}

function applyOverLay() {
    var overlay = document.createElement("div");
    overlay.setAttribute("id", "overlayAttr");
    overlay.setAttribute("class", "overlay");
    document.body.appendChild(overlay);
}

function hideindicator() {
    $('.activity-indicator').activity(false);
    setTimeout(function() { $(".activity-indicator").empty().remove(); }, 0);
    setTimeout(function() { $(".overlay").empty().remove(); }, 0);
}

function loadhtmlpage() {   
    //location.href='#refillReminder';
    $.mobile.changePage("#refillReminder"); 
    showIndicator();
    hideindicator();
}

style.css:

.activity-indicator {
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 45%;
    z-index: 1001;
}

Ответы

Ответ 1

Я использовал следующий код, чтобы показать индикатор активности на Android. Попытайтесь это.. это может помочь.

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    $(document).bind("ajaxSend", function() {
        navigator.notification.activityStart("App Name","Loading...");
     }).bind("ajaxStop", function() {
        navigator.notification.activityStop();
    }).bind("ajaxError", function() {
        navigator.notification.activityStop();
     });    

}

Ответ 2

Возможно, вам стоит попытаться показать индикатор в методе loadhtmlpage и добавить обработчик к методу pagehow на странице #refillReminder jquery чтобы отключить его.

Я использовал индикатор jQuery Mobile по умолчанию, и вы пытаетесь показать на той же странице перед длинной операцией, как вызов ajax, и скрыть ее в обработчике всегда.

Также кажется странным, что вы пытаетесь скрыть его после того, как вы показываете его с этим таймаутом.

Ответ 3

Вы можете использовать индикатор активности мобильных jquery по умолчанию в качестве резервной копии, используя:

$.mobile.loading('hide'); //to hide the spinner
$.mobile.loading('show'); //to show the spinner

Компонент очень гибкий, вы можете использовать тему или перезаписать вращающийся gif.

Подробнее здесь JQuer Mobile Loader

Ответ 5

Android-браузер немного медленнее по сравнению с настольными браузерами при создании элементов и стилизации их с помощью javascript. Таким образом, для вашего случая индикатор может занять время при загрузке в браузере Android, но из-за проблемы, о которой я упоминал, запрос уже завершен в течение этого времени, и индикатор не получил шанса появиться, попробуйте использовать стиль css, добавлять/удалять классы и избегать встроенного CSS-стиля с помощью javascript, где это возможно. Для Activity loader попробуйте что-то вроде этого:

http://jsbin.com/oPIyuqUk/1/edit?html,css,js,output

или попробуйте JQuery для мобильных погрузчиков:

http://demos.jquerymobile.com/1.2.1/docs/pages/loader.html