我尝试在我的应用程序中显示活动指示器。我正在使用activity.js
作为活动指示器。那个在浏览器和iPhone中工作正常,但它在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;
}
我使用以下代码在 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();
});
}
也许您应该尝试在 loadhtmlpage 方法中显示指示器,并在 #refillReminder jquery 页面中向 pageshow 方法添加一个处理程序以将其关闭。
我使用了jQuery Mobile默认指示器,您尝试在ajax调用等长时间操作之前在同一页面中显示,并将其隐藏在始终处理程序中。
此外,在显示 0 超时后,您试图隐藏它似乎很奇怪。
您可以使用默认的 jquery 移动活动指示器作为回退,使用:
$.mobile.loading('hide'); //to hide the spinner
$.mobile.loading('show'); //to show the spinner
该组件非常灵活,您可以使用主题或覆盖旋转的 gif。
更多信息在这里 Jquery 移动加载程序
Androide 设备很慢
也许尝试在这里优化您的代码:
http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/与桌面浏览器相比,Android浏览器在使用javascript创建元素和样式时略慢。因此,对于您的情况,该指标在 android 浏览器中加载可能需要一些时间,但由于我提到的问题,请求已经在该时间内完成,并且指标没有机会出现,请尝试使用 css 样式,添加/删除类并尽可能避免使用 javascript 进行内联 css 样式。对于活动加载程序,请尝试如下操作:
http://jsbin.com/oPIyuqUk/1/edit?html,css,js,output
或在此处尝试 Jquery 移动加载器:
http://demos.jquerymobile.com/1.2.1/docs/pages/loader.html