CODEWITHSUNDEEP
javascriptjqueryresizeonresize
RogerRoger
RogerRoger

Reputation: 396

Most performant way to check onresize of dom object

This is a really specific need. Basically, I want to listen for when any of about 20 DOM objects change height or width. The change can be caused by window resize, by contained content changes, or by some javascript acting on the DOM object.

IE offers onresize() for any DOM object, not just the viewport, and this event is VERY performant. In fact, I can call a function onresize() and the function will fire continuously during the resize of the related DOM object. For example, I can adjust another DOM object to match the height of the object with onresize() and the two object's heights will mirror each other, with no perceptible lag, even when the resized object is animated to grow in height. AWESOME. But, for all browsers except IE, onresize() only works on viewport resize (browser/frame). Shucks.

Now I'm left with polling if the objects are resizing, which is very expensive and provides very noticeable lag when I'm trying to mirror the objects.

So, my question: what is the most performant way to raise an event when a DOM object is resized?

Sorry for the long question. Also, I am specifically NOT looking to achieve this with pure CSS. This is part of an experiment.

Thanks anyone who has time to reply!

Upvotes: 2

Views: 401

Answers (2)

jfriend00
jfriend00

Reputation: 707736

The most performant way is to use an HTML/CSS layout that gets the browser to size the objects to match automatically. You would have to show us your exact HTML for us to advise how that might be done in your case.

As you have discovered, there are not good notifications for you to directly monitor the resizing of individual objects. About the best you can do is to monitor all possible events that might lead to a resize and then manually check each object yourself against a previously saved size or by comparing two objects to see if they match. That will likely not get you a lag-free experience, but it will be about as good as you can do with a javascript solution.

Upvotes: 0

austincheney
austincheney

Reputation: 1199

Store the width and height in a variable that is later referenced in closure. The when the necessary event is fired check the clientHeight and clientWidth property against those stored in your variable.

Here is GUI I made about 6 months ago that solves that problem by example: http://prettydiff.com/jsgui/

Upvotes: 2

Related Questions