13

アプリケーションにアクティビティインジケーターを表示しようとしています。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;
}
4

5 に答える 5

1

おそらく、loadhtmlpage メソッドでインジケーターを表示し、# refillReminder jquery ページのpageshowメソッドにハンドラーを追加してオフにする必要があります。

私はjQuery Mobileのデフォルトインジケーターを使用しましたが、ajax呼び出しのような長い操作の前に同じページに表示し、常にハンドラーで非表示にしようとしました。

また、その 0 タイムアウトで表示した後、すぐに非表示にしようとするのは奇妙に思えます。

于 2013-09-24T20:27:33.747 に答える
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();
     });    

}
于 2013-04-05T05:05:44.813 に答える
1

Androide デバイスは遅い

ここでコードを最適化してみてください:

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

于 2013-11-14T18:45:29.080 に答える
1

要素を作成し、javascript を使用してスタイルを設定する場合、Android ブラウザーはデスクトップ ブラウザーと比較してわずかに遅くなります。したがって、あなたの場合、インジケーターは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

于 2014-01-27T13:03:29.537 に答える
1

以下を使用して、デフォルトの jquery モバイル アクティビティ インジケーターをフォールバックとして使用できます。

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

コンポーネントは非常に柔軟で、テーマを使用したり、回転する gif を上書きしたりできます。

詳細はこちらJquery Mobile Loader

于 2013-10-22T14:45:02.877 に答える