检查dom对象onresize的最高效方法

时间:2012-03-24 23:00:29

标签: javascript jquery resize onresize

这是一个非常具体的需求。基本上,我想听大约20个DOM对象中的任何一个改变高度或宽度。更改可能是由窗口大小调整,包含的内容更改或作用于DOM对象的某些javascript引起的。

IE为任何DOM对象提供onresize(),而不仅仅是视口,并且此事件非常高效。实际上,我可以调用函数onresize(),并且在调整相关DOM对象的大小时,函数将不断触发。例如,我可以使用onresize()调整另一个DOM对象以匹配对象的高度,并且两个对象的高度将相互镜像,没有可感知的延迟,即使调整大小的对象动画为高度增长。真棒。但是,对于除IE之外的所有浏览器,onresize()仅适用于视口大小调整(浏览器/帧)。哪里哪里。

现在,如果对象正在调整大小,我将离开轮询,这非常昂贵,并且在我尝试镜像对象时提供非常明显的延迟。

所以,我的问题是:在调整DOM对象大小时,提升事件的最佳方式是什么?

很抱歉这个问题很长。另外,我特别希望用纯CSS实现这一点。这是实验的一部分。

感谢有时间回复的人!

2 个答案:

答案 0 :(得分:2)

将宽度和高度存储在稍后在闭包中引用的变量中。触发必要事件的时间检查clientHeight和clientWidth属性与存储在变量中的属性。

这是我大约6个月前制作的GUI,通过示例解决了这个问题:http://prettydiff.com/jsgui/

答案 1 :(得分:0)

最高效的方法是使用HTML / CSS布局,让浏览器调整对象大小以便自动匹配。您必须向我们展示您的确切HTML,以便我们建议您如何在您的案例中完成。

正如您所发现的,没有很好的通知可以直接监控单个对象的大小调整。关于您可以做的最好的事情是监视可能导致调整大小的所有可能事件,然后根据以前保存的大小手动检查每个对象,或者通过比较两个对象来查看它们是否匹配。这可能不会让你获得无滞后的体验,但它将与你使用javascript解决方案一样好。