响应式网站：当方向发生变化时，如何从jQuery获得新的价值？

我有一个反应灵敏的图像，根据水平和垂直方向改变它的大小（宽度和高度）。我想根据图像的高度设置元素的位置。当我通过jQuery

$（“.div internal img”）.height（）获取图像的高度时，它返回图像的高度。现在，当我更改方向时，高度的值保持不变，尽管实际图像的大小发生变化。看起来如果不刷新页面，我就无法获得新高度。有没有办法在不刷新页面的情况下通过jQuery获得新高度？
您有几个选项。
1）捕获window.onresize事件

window.onresize = function (event) { 
var height = $(".div-inner img").height();
//Do your thing
}

使用这种方法的缺点是调用任何调整大小的命令。因此，这可能会在一个典型的浏览器上触发一百万次（不是字面上的）调整。所以你需要结合一个定时器，这样它只能每隔几秒钟发射一次

所以真的会是这样

var resizeTimeout;
    window.onresize = function (event) {
        clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(function () {
                      // Alert when browser resized
                      alert ('Resized');
                     // DO YOUR THING
       }, 1000);
};

2）使用方向更改（在手机中从纵向切换到横向，然后再切换回来）。缺点是它在桌面/笔记本电脑浏览器中不会做任何事情，因为没有方向改变

window.addEventListener("orientationchange", function() {
    // Alert the orientation value
    alert(window.orientation);
}, false);

如果您能提供一些信息，说明为什么更改方向时图像会改变大小，这会有所帮助。您确定实际图像的大小会改变，还是浏览器只是放大了一点？或者您正在手动或通过CSS中的媒体查询更改图像的大小？您正在捕获
调整大小事件
？感谢您的解释。我用了一个图像滑块。对于
orientationchange
事件，它似乎工作正常，但在我单击滑块中的“下一步”按钮，然后更改方向后，它失败了。但是，如果我只是加载页面并改变方向而不点击滑块，它似乎工作得很好。知道发生了什么吗？你用的是什么滑块？滑块倾向于将固定和内联样式应用于幻灯片的元素，这可能会影响您尝试执行的操作。我倾向于使用jQuery循环，因为它非常轻量级且易于使用。它最基本的用法就是
$（'.slidercontainer'）.cycle（）您可以做的是销毁幻灯片并在方向更改时重建它。因此，对于orient change事件中的jQuery循环，可以从
$（'.slidercontainer'）.cycle（'destroy'）开始然后
$（'.slidercontainer'）.cycle（）让我知道进展如何。我正在引导中使用旋转木马滑块。我认为它没有
destroy
功能-我不确定。我用另一种方法解决了它。我注意到在移动到下一张幻灯片后，当方向改变时，
var height
的值变为0。我在jQuery中检测到图像高度，如果它等于0，我将元素的位置设置为特定值。虽然这似乎不是一个完美的解决方案，但它确实奏效了。