Comments 12
По таймеру проверять размеры не лучшее решение.
Можно фрейм кинуть внутрь элемента и подписаться на событие resize
https://codepen.io/AHDPEu/pen/ALvawa
Можно фрейм кинуть внутрь элемента и подписаться на событие resize
https://codepen.io/AHDPEu/pen/ALvawa
Фреймы — очень тяжеловесные штуки. Как по памяти так и по времени создания.
Хорошо, пусть это будет тег object
Ещё надо проверить, что тяжелее по памяти, времени создания и тд, пустой фрейм с одним событием или таймер раз в 200 / 500 мс который опрашивает размеры и тем самым запускает не менее тяжелые операции для браузера.
Так в этом коде нужно добавить проверку, что элемент существует. Получить утечку неопытному программисту проще простого.
Ещё надо проверить, что тяжелее по памяти, времени создания и тд, пустой фрейм с одним событием или таймер раз в 200 / 500 мс который опрашивает размеры и тем самым запускает не менее тяжелые операции для браузера.
Так в этом коде нужно добавить проверку, что элемент существует. Получить утечку неопытному программисту проще простого.
Вообще задача автора решается на чистом css, можно посмотреть примеры многих css фреймворков, где от ширины окна меню прячется под иконку с бургером. Задав каждому элементу max-width одинаковый, можно прятать нужное количество таких элементов и одновременно показывать из в меню под бургер иконкой.
Я сначала подумал, что требуется событие действительно на блочный элемент (например, с position:absolute), а не на окно браузера.
Я сначала подумал, что требуется событие действительно на блочный элемент (например, с position:absolute), а не на окно браузера.
Событие требуется именно на блочный элемент, потому что размеры окна могут не изменится. В моём случае количество элементов меню и ширина каждого элемента заранее не известна, мне не нужно из горизонтального меню делать вертикальное. У меня имеется горизонтальное и вертикальное меню, когда в горизонтальное меню элементы больше не помещается, они перемещаются в вертикальное меню. Я низнаю решения такой задачи с адаптивной вёрсткой на CSS, поэтому предложил такое.
Если в доме ничего не менялось, то reflow происходить не будет. Браузеры не настолько тупые. А вот фрейм — это полноценное окно с полным фаршем — свой дом, свои js объекты, свои события и тп.
На мой взгляд, лучше отслеживать глобальное событие resize, но стартовать обработчик не на каждый тик, а с ограничением количества срабатываний.
Пример: MDN resize
А уже внутри этого обработчика производить необходимые действия на всю разметку.
Пример: MDN resize
А уже внутри этого обработчика производить необходимые действия на всю разметку.
window.resize нужно делать в вашем случае.
https://github.com/marcj/css-element-queries
И зачем это на хабре? До проверки через timeout даже junior сам дойдет и подобных решений в гугле куча.
Относительно нормальное решение:
П.с полифил для MutationObserver искать на гитхабе
Относительно нормальное решение:
let target = document.getElementById(divId);
let $target = $(target);
let lastHeight = $target.height();
let observer = new MutationObserver(() => {
let newHeight = $target.height();
if (lastHeight !== newHeight) {
// делаем что то
lastHeight = newHeight;
}
});
observer.observe(target, { attributes: true, subtree: true });
П.с полифил для MutationObserver искать на гитхабе
Sign up to leave a comment.
Событие при изменении размеров блочного элемента — resize