如何使用 jquery 触发一般 DOM 对象调整大小的事件

Posted 2023-05-07

【中文标题】如何使用 jquery 触发一般 DOM 对象调整大小的事件

【英文标题】：How to fire event on general DOM object resize with jquery

【发布时间】：2014-08-15 10:45:12

【问题描述】：

窗口调整大小有一个事件。

$(window).resize(function() 
    ...
);

但是如果我想在任何类型的 DOM 对象上触发事件会是什么，例如：

$('div#myDiv').resize(function() 
    ...
));

但上述方法似乎不起作用。这可能和方便吗？还是有什么好办法？

【问题讨论】：

喜欢这个？ ***.com/questions/10086693/…

【参考方案1】：

这是不可能的——但也不应该真的有必要。如果您的 div 正在根据窗口大小更改大小，即通过媒体查询，只需使用 $(window).resize()。如果它是通过其他一些 javascript 代码更改的，您应该只使用该代码。

如果您愿意，您可以在 div 上触发调整大小事件并收听该事件，但您仍需手动触发该事件 - 即

$('div#myDiv').on('custom_resize', function() 
    ...
));

// whenever you change div size
$('div#myDiv').trigger('custom_resize');

如果您无权访问更改 div 的代码，则可以轮询宽度/高度的变化 - 例如（仅用于宽度）：

var div_width = $('div#myDiv').width();
setInterval(function() 
    if (div_width != $('div#myDiv').width()) 
        div_width = $('div#myDiv').width();
        $('div#myDiv').trigger('custom_resize');
    
, 1);

如果您要动态添加图像，这应该可以：

$('<img>').on('load', function()  ... )
          .attr('src', img url)
          .appendTo(container)

【讨论】：

我的问题是：div中有几张图片。当图像加载时，div 会改变它的大小，我希望它触发

嗯好的，在这种情况下你应该监听图片的加载事件：$('img').on('load', function() ...)

但这对我的问题来说并不太明确：我想在里面的所有图像都准备好之后触发它。但我不想关心那里有什么图片，而且$('img').load() 似乎并不是每张图片都会触发。

只要图片不是动态添加的，你可以试试$(window).on('load', ...)?

是的，我可以这样做，但是当图像被动态添加时，解决方案仍然远非我想要的。

【参考方案2】：

这个插件提供了基于元素创建调整大小事件的能力：

一种跨浏览器、基于事件的元素调整大小检测。

简而言之，这个实现不使用内部定时器来检测 大小变化（就像我发现的大多数实现一样）。它使用滚动 大多数浏览器上的事件，以及 IE10 及以下版本的 onresize 事件。

使用的方法不仅检测 javascript 生成的 resize 变化 还有从 CSS 伪类进行的更改，例如：悬停，CSS 动画等。

https://github.com/sdecima/javascript-detect-element-resize

【讨论】：

谢谢，可能是我想要的。