JavaScript元素高度匹配问题：方向切换后高度无法即时调整的咨询

问题原因 #

orientationchange 事件触发时机早于浏览器完成页面布局重绘，此时直接获取 .divImage 的高度，得到的仍是旋转前的旧值，导致导航div高度无法同步更新。同时你的代码存在重复逻辑，可优化封装。

解决方案 #

1. 封装高度同步逻辑：把重复的高度调整代码抽成独立函数，方便复用和维护。
2. 延迟执行同步操作：在方向切换/窗口 resize 时，等待浏览器完成布局重绘后再获取最新高度，可通过 requestAnimationFrame 或短延迟 setTimeout 实现。
3. 合并事件监听：resize 和 orientationchange 事件可合并监听，避免重复绑定。

优化后的代码 #

// 封装高度同步函数
function syncNavigationHeight() {
  const imageHeight = $(".divImage").height();
  $(".divNavigation").height(imageHeight);
}

// 页面加载完成后初始化高度
$(document).ready(syncNavigationHeight);

// 监听窗口resize和设备方向切换事件，用防抖避免频繁触发
let resizeTimer;
$(window).on("resize orientationchange", function() {
  clearTimeout(resizeTimer);
  // 用requestAnimationFrame确保在浏览器重绘后执行，获取最新高度
  resizeTimer = setTimeout(() => {
    requestAnimationFrame(syncNavigationHeight);
  }, 50);
});

补充说明 #

• requestAnimationFrame 会将回调函数加入浏览器的重绘队列，确保在页面布局更新后执行，能精准获取最新的元素尺寸。
• 加入短延迟的 setTimeout 是为了兼容部分对 requestAnimationFrame 支持不佳的旧设备，同时避免 resize 事件频繁触发导致的性能问题。
• 如果你的图片是异步加载的，还需要监听图片的 load 事件，在图片加载完成后再执行高度同步，避免初始高度计算错误。

内容的提问来源于stack exchange，提问作者Greife