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

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

您还可以预加载背景图像，以便立即进行切换。

于 2012-09-26T21:30:29.440 回答
2

您应该能够挂钩deviceorientation事件，该事件会触发每个动作，而不仅仅是完全更改。请参阅这些文章：

于 2012-09-26T21:41:27.523 回答