1

特定の方法で回転させると、ページの背景画像を更新する次のコードがあります。

window.onorientationchange = function() {
    var orientation = window.orientation;
    switch (orientation) {
    case 0:
        $(".bg-img").css("background-image", "url(" + portrait + ")");
        break;
    case 90:
        $(".bg-img").css("background-image", "url(" + landscape + ")");
        break;
    case -90:
        $(".bg-img").css("background-image", "url(" + landscape + ")");
        break;
    };
};​

これは機能しますが、ページを回転させると、新しい画像を読み込むのに数秒かかり、ページが奇妙に見えます。

方向が変更されているのではなく、変更されていることを検出する方法はありますか? みたいなwillAnimateFirstHalfOfRotationToInterfaceOrientation？

4

2 に答える 2

2

このdeviceorientationイベントは、デバイスの現在の位置が更新されると発生します。 これがデモです。

これは iPhone ≥ 4 および iPad ≥ 2 でのみ機能することに注意してください。古い Apple ハードウェアにはジャイロスコープがありません。

このイベントは、私の Galaxy Nexus Android 4 デバイスの Chrome とストック ブラウザでも機能しました。

背景画像をプリロードして、切り替えが即座に行われるようにすることもできます。

于 2012-09-26T21:30:29.440 に答える
2

deviceorientation完全な変更だけでなく、すべてのモーションでトリガーされるイベントをフックできるはずです。それらの記事を参照してください。

于 2012-09-26T21:41:27.523 に答える