События изменения размера запускаются всякий раз, когда изменяется размер окна документа, или вы можете сказать, когда изменяется размер представления документа. Теперь это изменение размера может срабатывать автоматически в таких случаях, как изменение ориентации устройства с альбомной на портретную или если кто-то намеренно меняет размер браузера. Теперь это поможет вам изменить некоторые аспекты DOM. Ниже мы упомянули различные варианты использования, в которых событие изменения размера может быть использовано и может оказаться полезным.

Пример использования

  1. Если вы хотите выровнять содержимое при изменении размера, например, рассмотрите элемент div, который меняет размер, можно использовать это событие, чтобы изменить выравнивание текста или другой внешний вид сайта.
  2. Если есть некоторые библиотеки JavaScript, которые вы используете или планируете внедрить, может возникнуть ситуация, когда время от времени событие изменения размера представления документа вообще не срабатывает, что приводит к ситуации, когда изменение размера различных элементов на экране не бывает.

Реализация прослушивателей событий изменения размера

  1. Простая реализация, в которой вы можете поймать событие и выполнить указанные задачи в обратном вызове.
window.onresize = function() { // do a load of stuff };

2. Немного рефакторим код, это упростит код

window.onresize = doSomethingCool; 
function doSomethingCool() { //do a load of stuff }

3. Вы также можете напрямую использовать jQuery, у него есть событие изменения размера.

Запуск события изменения размера вручную без изменения размера представления документа

Это то, что нам нужно, когда нет изменения размера представления документа, но мы требуем, чтобы некоторые компоненты вели себя так, как если бы произошли изменения. Обычно это используется в ситуациях, когда перекомпоновка не происходит автоматически, мы должны инициировать событие изменения размера вручную, чтобы прослушиватели событий изменения размера прослушивали его и изменяли размер элемента HTML.

window.dispatchEvent(new Event('resize'));

Осторожность

Помните об этом, никогда не запускайте ресурсоемкие операции в прослушивателе событий изменения размера, такие как модификация DOM или некоторые вычисления с большими объемами данных. Всегда рекомендуется регулировать эти события с помощью requestAnimationFrame, setTimeout.

Первоначально опубликовано в The Web Juice.