为什么 jQuery 调整大小检测不适用于我的 DOM 元素？答案

【问题标题】：Why does jQuery resize detection not work on my DOM element?为什么 jQuery 调整大小检测不适用于我的 DOM 元素？
【发布时间】：2013-09-09 14:56:10
【问题描述】：

我需要检测元素何时调整大小以实现响应式内容。我看到的示例都检测窗口是否已调整大小，但我找不到如何检测 DOM 元素是否调整大小。例如，以下仅计算窗口调整大小：

HTML：

<div id="resizer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac accumsan elit, sit amet ultrices massa. Pellentesque iaculis nulla ut fringilla pellentesque. Duis ut suscipit libero. Sed et mauris nisl.</div>
<output id="output1">Div not yet resized.</output>
<output id="output2">Window not yet resized.</output>

JS：

var divResizes = 0;
$("#resizer").resize(function(){
    $('#output1').html("Div resized " + ++divResizes + " times.");
});
var windowResizes = 0;
$(window).resize(function() {
    $('#output2').html("Window resized " + ++windowResizes + " times.");
});

调整窗口大小后的示例输出：

Lorem ipsum dolor sit amet，consectetur adipiscing elit。阿联酋航空 accumsan elit，坐在 amet ultrices 马萨。 Pellentesque iaculis nulla ut fringilla pellentesque。 Duis ut suscipit libero。 Sed et mauris nisl。 Div 尚未调整大小。窗口大小调整了 23 次。

SSCCE：http://jsfiddle.net/3K2YY/

【问题讨论】：

标签： jquery dom resize

【解决方案1】：

来自文档：

"当浏览器窗口大小发生变化时，向窗口元素发送resize事件："

http://api.jquery.com/resize/

问题是 jQuery UI 函数 resizable 确实触发了浏览器事件“resize”。所以你可以在更新的 jsFiddle 中看到，改变“resizer” div 的大小会导致两者都计数，但延迟的大小变化不会。

http://jsfiddle.net/3K2YY/2/

t = setTimeout(function(){
    $("#resizer").width("50%");

}, 2000);

您应该找到其他事件/侦听器来检测此更改。我不确定这是否可能。您可以只使用窗口调整大小事件来（重新）检查其他元素的尺寸。

【讨论】：

【解决方案2】：

只有window 在官方规范中有onresize 事件。使用来自

的 polyfill

https://github.com/marcj/css-element-queries

让它工作。

这个库有一个类ResizeSensor，你可以使用它。

var divResizes = 0;
new ResizeSensor($("#resizer"), function(){
    $('#output1').html("Div resized " + ++divResizes + " times.");
});

【讨论】：

+1 是一个可行的答案，但我不能证明为一个函数使用整个库是合理的。
整个库？只需下载这一类文件，您就可以开始了。
好吧，我在jsfiddle.net/Supuhstar/3K2YY/16 尝试过，但我担心它添加的几个元素，以及它强制目标元素为position:relative 的事实。这是一个可靠的解决方案，但我不会在生产中使用它，因为我不知道它会如何影响复杂的网站。