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
}

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

所以真的会是这样的。

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

响应式网站：如何在方向发生变化时从jQuery获取新值？

1 个答案:

你有几个选择。