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硬件没有陀螺仪。

该活动还适用于Chrome和股票浏览器中的Galaxy Nexus Android 4设备。

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

Answer 2

您应该可以挂钩deviceorientation事件，该事件会触发每个动作，而不仅仅是完全更改。看那些文章：

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

2 个答案: