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

Question

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

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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