窗口方向改变前触发函数以调整内容尺寸？

Question

我正在构建一个移动Web应用程序，尝试在用户旋转手机后隐藏布局重排（我有一个由JS设置的纵向和横向布局）。

当调整大小时，我认为我应该能够设置$('body').display = "none";并在一秒左右淡入body，但是重排仍然会在display="none"启用之前发生。

是否有办法在页面旋转时立即触发函数，以便我可以隐藏重新排列的元素？ 我还尝试过onorientationchange监听器，但它们似乎直接在事件发生后触发。

- user885663

Answer 1

你可以使用超时来延迟重新洗牌：

$(window).resize(function(){
   $('body').hide();
   setTimeout(function(){
      reshuffle();
      $('body').show();
   }, 100);//100ms
});

- André Alçada Padez

---

感谢您的输入，这几乎就是我目前正在使用的代码。在调整大小之前，浏览器似乎会使用旧的CSS值呈现新方向的布局，而.hide没有足够的时间被触发（因此在大约50毫秒内我可以看到未混排的布局）。我认为这可能无法实现 =s。 - user885663

谢谢，我将它附加到我的onorientationchange事件上，而不是调整大小，只是为了再尝试一次，似乎它工作得更好一些，也许50%的时间它看起来干净整洁。此外，将任何容器元素设置为您的背景颜色也有帮助，这样默认的白色背景就不会显示出来。 - user885663

Answer 2

你可以尝试这样做：

$.when($('body').hide()).then(function() {
     $(window).resize(function(){
         setTimeout(function(){
             reshuffle();
         }, 100);//100ms
     });
});

文档

- Charlie G

---

谢谢您的快速回复，我会尝试这个方法，但我认为它可能无法解决问题，因为.hide直到调整大小事件之后才会实际生效（除非.then可以排队现有的调整大小），所以（如果我正确地考虑了您的代码将如何工作）它将“在手机旋转后触发调整大小>检测到body已隐藏>然后等待调整大小>触发延迟布局函数？” - user885663

我理解你的问题是想在隐藏主体后进行重新洗牌，我相信这样做可以实现（除非我错了）。 - Charlie G

我现在没有太多时间来测试它，但是当我开始实施时会让你知道。看起来它似乎能够完成任务，但我面临的问题是手机浏览器不够快，无法跟上方向变化并在横屏之前隐藏内容。 - user885663