Самый эффективный способ проверить размер объекта dom

Question

Это действительно специфическая потребность. По сути, я хочу слушать, когда какой-либо из 20 объектов DOM меняет высоту или ширину. Это изменение может быть вызвано изменением размера окна, изменениями содержимого или неким javascript, действующим на объект DOM.

IE предлагает onresize () для любого объекта DOM, а не только для области просмотра, и это событие ОЧЕНЬ производительно. Фактически, я могу вызвать функцию onresize (), и функция будет срабатывать непрерывно во время изменения размера соответствующего объекта DOM. Например, я могу настроить другой объект DOM, чтобы он соответствовал высоте объекта с помощью onresize (), и высота двух объектов будет зеркально отражать друг друга, без заметного запаздывания, даже если объект с измененным размером анимирован для увеличения высоты. КЛАССНО. Но для всех браузеров, кроме IE, onresize () работает только с изменением размера области просмотра (браузер / фрейм). Чепуха.

Теперь у меня есть опрос, если размеры объектов изменяются, что очень дорого и обеспечивает очень заметную задержку, когда я пытаюсь отразить объекты.

Итак, мой вопрос: каков наиболее эффективный способ вызвать событие при изменении размера объекта DOM?

Извините за длинный вопрос. Кроме того, я специально НЕ стремлюсь достичь этого с помощью чистого CSS. Это часть эксперимента.

Спасибо всем, кто успел ответить!

Answer 1

Сохраните ширину и высоту в переменной, на которую позже ссылаются в замыкании. Когда запускается необходимое событие, проверьте свойства clientHeight и clientWidth по отношению к тем, которые хранятся в вашей переменной.

Вот графический интерфейс, который я сделал около 6 месяцев назад, который решает эту проблему на примере: http://prettydiff.com/jsgui/

Answer 2

Самый эффективный способ - использовать макет HTML / CSS, который позволяет браузеру автоматически подбирать размеры объектов. Вам нужно будет показать нам ваш точный HTML-код, чтобы мы посоветовали, как это можно сделать в вашем случае.

Как вы обнаружили, нет хороших уведомлений для непосредственного мониторинга изменения размеров отдельных объектов. Самое лучшее, что вы можете сделать, - это отслеживать все возможные события, которые могут привести к изменению размера, а затем вручную проверять каждый объект по предварительно сохраненному размеру или сравнивая два объекта, чтобы определить, совпадают ли они. Это, скорее всего, не даст вам опыта без задержек, но это будет примерно так же хорошо, как вы можете сделать с помощью javascript.