javascript - 检测 iPhone 是否在旋转时旋转？

Question

我有以下代码，当您以某种方式旋转我的页面时，它会更新我的页面的背景图片:

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 这样的东西？

Answer 1

deviceorientation事件触发并更新设备的当前位置。 Here's a demo.

请注意，这仅适用于 iPhone ≥ 4 和 iPad ≥ 2。较旧的 Apple 硬件没有陀螺仪。

该事件也适用于我的 Galaxy Nexus Android 4 设备的 Chrome 和标准浏览器。

你也可以 preload您的背景图像，以便立即发生切换。