Chỉ báo hoạt động di động jQuery không hiển thị trong android

Question

Tôi cố gắng hiển thị chỉ báo hoạt động trong ứng dụng của mình. Tôi đang sử dụng activity.js cho chỉ báo hoạt động. Đó là một trong những hoạt động tốt trong trình duyệt và iPhone Nhưng nó không hoạt động trong các thiết bị Android.

Tôi không biết tại sao chỉ báo không hoạt động trên các thiết bị Android.

Đây là mẫu mã của tôi cho chỉ số hoạt động:

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

Answer 1

Tôi đã sử dụng đoạn mã sau để hiển thị các chỉ số hoạt động có nguồn gốc trên Android..try này .. nó có thể giúp ..

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

} 

Answer 2

Có thể bạn nên cố gắng hiển thị chỉ báo theo phương thức loadhtmlpage và thêm trình xử lý vào phương thức pageshow trong #refillReminder trang jquery để tắt nó đi.

Tôi đã sử dụng chỉ báo mặc định của jQuery Mobile và bạn cố gắng hiển thị, trong cùng một trang trước một hoạt động dài như cuộc gọi ajax và ẩn nó trong trình xử lý luôn.

Cũng có vẻ lạ khi bạn cố che giấu nó một cách nghiêm ngặt sau khi bạn hiển thị nó với thời gian chờ đó là 0.

Answer 3

Bạn có thể sử dụng các chỉ số hoạt động di động jquery mặc định như một dự phòng, sử dụng:

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

Các thành phần là rất linh hoạt, bạn có thể sử dụng chủ đề hoặc ghi đè lên gif quay.

Thông tin thêm ở đây Jquery Mobile Loader thiết bị

Answer 4

Androide chậm

lẽ cố gắng tối ưu hóa mã của bạn ở đây:

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

Answer 5

trình duyệt Android là hơi chậm hơn so với các trình duyệt máy tính để bàn khi tạo các yếu tố và tạo kiểu cho chúng sử dụng javascript . Vì vậy, đối với trường hợp của bạn, chỉ báo có thể mất thời gian tải trong trình duyệt android nhưng do sự cố tôi đã đề cập, yêu cầu đã được hoàn thành trong thời gian đó và chỉ báo không có cơ hội hiển thị, hãy thử sử dụng kiểu dáng css , thêm/xóa các lớp và tránh tạo kiểu css nội tuyến bằng javascript nếu có thể. Đối Hoạt động nạp thử một cái gì đó như thế này:

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

hoặc thử Jquery bộ tải điện thoại di động ở đây:

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