dom 객체의 onresize를 확인하는 가장 좋은 방법

Question

이것은 실제로 필요합니다. 기본적으로 약 20 개의 DOM 객체 중 하나가 높이나 너비가 바뀌는 것을 듣고 싶습니다. 변경 내용은 창 크기 조정, 포함 된 내용 변경 또는 DOM 개체에서 작동하는 일부 JavaScript에 의해 발생할 수 있습니다.

IE는 뷰포트뿐만 아니라 모든 DOM 개체에 대해 onresize()를 제공하며이 이벤트는 매우 효과적입니다. 사실, 나는 onresize() 함수를 호출 할 수 있으며 관련 DOM 객체의 크기를 조정하는 동안 함수는 계속해서 실행됩니다. 예를 들어, 다른 DOM 객체를 onresize()로 객체의 높이와 일치 시키도록 조정할 수 있으며, 크기가 조정 된 객체가 애니메이션을 통해 높이가 늘어나는 경우에도 두 객체의 높이가 서로를 미러링합니다. 굉장한. 그러나 IE를 제외한 모든 브라우저에서 onresize()는 뷰포트 크기 조정 (브라우저/프레임)에서만 작동합니다. 망할.

개체가 크기 조정중인 경우 폴링이 남았습니다. 개체를 미러링하려고 할 때 매우 비싸고 눈에 띄는 지연을 제공합니다.

내 질문 : DOM 개체 크기를 조정할 때 이벤트를 발생시키는 가장 좋은 방법은 무엇입니까?

대단히 죄송합니다. 또한, 나는 순수 CSS로 이것을 달성하기 위해 특별히 노력하지 않고있다. 이것은 실험의 일부입니다.

답장을 보내 주셔서 감사합니다.

Answer 1

나중에 closure에서 참조되는 변수에 너비와 높이를 저장하십시오. 필요한 이벤트가 발생하면 clientHeight 및 clientWidth 속성을 변수에 저장된 속성과 비교하여 확인하십시오. http://prettydiff.com/jsgui/

Answer 2

가장 성능이 좋은 방법은 자동으로 일치하는 크기로 객체를 브라우저를 취득하는 HTML/CSS 레이아웃을 사용하는 것입니다 : 여기

예에 의해 그 문제를 해결 나는 약 6 개월 전에 만든 GUI입니다. 귀하의 경우에 어떻게 수행되는지 조언을 드리기 위해 정확한 HTML을 제시해야합니다.

당신이 발견 한 것처럼 개별 개체의 크기 조정을 직접 모니터링 할 좋은 알림이 없습니다. 가능한 최선의 작업은 크기 조정으로 이어질 수있는 모든 가능한 이벤트를 모니터링 한 다음 이전에 저장 한 크기와 비교하여 각 개체를 직접 확인하거나 두 개체를 비교하여 일치하는지 확인하는 것입니다. 그렇게하면 지연이없는 경험을 얻을 수는 없지만 자바 스크립트 솔루션으로 할 수있는만큼 좋은 결과를 얻을 수 있습니다.