jQuery移动端活动指示器在安卓系统中没有显示

Question

我尝试在我的应用程序中显示活动指示器。 我正在使用activity.js作为活动指示器。它在浏览器和iPhone上运行良好，但在安卓设备上无法工作。

我不知道为什么指示器在安卓设备上无法工作。

这是我用于活动指示器的示例代码：

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;
}

- user

---

如果您提供正在使用的软件版本号（例如jQueryMobile），以及您是在浏览器上还是在具有Web视图的已编译应用程序中遇到此问题，将会很有帮助。 - Aaron D

Answer 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();
     });    

}

- user

Answer 2

如果需要备用方案，您可以使用默认的jquery移动活动指示器，使用以下方法：

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

这个组件非常灵活，您可以使用主题或覆盖旋转的gif图像。

更多信息请参见Jquery Mobile Loader。

- Carlos487

Answer 3

安卓设备运行速度较慢。

也许尝试在此处优化您的代码：

http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

- Siyon DP

Answer 4

相比桌面浏览器，在使用JavaScript创建元素和样式时，Android浏览器稍微慢一些。因此，在您的情况下，指示器可能需要在Android浏览器中加载时间较长，但由于我提到的问题，请求已经在该时间内完成，指示器没有机会显示出来，请尽可能使用CSS样式，添加/删除类，并避免在可能的情况下使用JavaScript的内联CSS样式。 对于Activity加载器，可以尝试以下方法：

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

或者在此尝试JQuery移动装载程序：

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

- Freelance PHP Programmer

Answer 5

也许你应该尝试在loadhtmlpage方法中显示指示器，并在#refillReminder jQuery页面的pageshow方法中添加处理程序以关闭它。

我已经使用了jQuery Mobile默认的指示器，你可以在长时间操作（如ajax调用）之前在同一页面中尝试显示它，并在always处理程序中隐藏它。

此外，你尝试在0超时后立即隐藏它似乎很奇怪。

- Carlos487