jquery - 响应式网站：如何在方向改变时从 jQuery 中获取新值？

Question

我有一个响应式图像，它根据水平和垂直方向改变它的大小（宽度和高度）。我想根据图像的高度设置元素的位置。当我通过 jQuery 抓取图像的高度时$(".div-inner img").height()，它会返回图像的高度。现在，当我更改方向时，尽管实际图像的大小发生了变化，但高度的值保持不变。看起来如果不刷新页面，我就无法获得新的高度。有没有办法在不刷新页面的情况下通过 jQuery 获得新的高度？

Answer 1

你有几个选择。

1)捕获 window.onresize 事件

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

使用它的缺点是会调用任何调整大小。因此，这可能会在典型的浏览器调整大小时触发一百万次（不是字面意思）。所以你需要结合一个 timout 让它每隔几秒触发一次。

所以真的会是这样的。

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);