jQuery 移动活动指示器未在 android 中显示

Posted 2023-05-06

【中文标题】jQuery 移动活动指示器未在 android 中显示

【英文标题】：jQuery mobile activity indicator not showing in android

【发布时间】：2012-11-10 16:26:21

【问题描述】：

我尝试在我的应用程序中显示活动指示器。我使用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;

【问题讨论】：

如果您提供您正在使用的软件的版本号（如 jQueryMobile）以及您是否在浏览器或带有 Web 视图的已编译应用程序中看到此行为，将会有所帮助。

【参考方案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 方法中显示指标，并在 #refillReminder jquery 页面中的 pageshow 方法中添加处理程序将其关闭。

我已经使用了 jQuery Mobile 默认指示器，您尝试在同一页面中显示，在像 ajax 调用这样的长操作之前并将其隐藏在 always 处理程序中。

在 0 超时显示后尝试将其隐藏起来似乎很奇怪。

【参考方案3】：

您可以使用默认的 jquery 移动活动指示器作为后备，使用：

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

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

更多信息在这里Jquery Mobile Loader

【参考方案4】：

Androide 设备速度慢

也许尝试在这里优化您的代码：

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

【参考方案5】：

在使用 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