Отслеживание изменения размеров DIV в jQuery: решение

Быстрый ответ

API ResizeObserver — это возможность отслеживать размеры блока DIV в реальном времени. Создавая функцию, которая откликается на каждое изменение размеров, мы получаем возможность работать с новыми значениями:

const observer = new ResizeObserver(entries => {
  const {width, height} = entries[0].contentRect;
  console.log(`Изменились размеры: ${width}x${height}`);
});

observer.observe(document.querySelector('#divToWatch'));

Представленный выше код отслеживает изменение размеров элемента с ID #divToWatch и выводит новые значения ширины и высоты при каждом их изменении. ResizeObserver поддерживается большинством современных браузеров. Впрочем, учтите необходимость полифила для тех браузеров, которые не поддерживают ResizeObserver.

Использование ResizeObserver API

Благодаря ResizeObserver можно настроить детальное отслеживание изменения размеров блоков DIV на веб-странице, словно у нас есть свой персональный детектив. Это как если бы он сообщал: "Представляю вашему вниманию! Размер DIV только что изменился... элементарно!"

Пример для наглядности

Пример ниже демонстрирует принцип работы ResizeObserver:

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`DIV изменил свои размеры: ${width}px x ${height}px.`);
  }
});

// Элементарно! – подхватывает наш детектив.
resizeObserver.observe(document.getElementById('responsive-div'));

Подробнее об этом расскажет наш спикер на видео

Ориентация на разные браузеры

Несмотря на широкую поддержку ResizeObserver, некоторые старые браузеры это API не поддерживают. В таких случаях будет полезен полифилл:

if (!('ResizeObserver' in window)) {
  // Приходится возвращаться к старым рецептам
}

Альтернативы и улучшения

Если использование ResizeObserver не подходит или требуется расширить функциональность, можно рассмотреть следующие варианты:

Размеры под контролем с ResizeSensor

ResizeSensor из библиотеки css-element-queries — это эффективная замена:

const resizeSensor = new ResizeSensor('#myElement', function() {
  console.log('Произошло изменение размеров!');
});

Универсальное решение: ResizeObserver и союзники

Сочетание ResizeObserver, обработчика событий изменения размера окна и MutationObserver может создать мощный инструмент для отслеживания динамики размеров:

window.addEventListener('resize', () => _check_for_changes(element));
const mutationObserver = new MutationObserver(() => _check_for_changes(element));
mutationObserver.observe(element, { childList: true, subtree: true });

Оптимальная производительность

Подобные операции могут негативно сказаться на производительности. Чтобы снизить нагрузку, используйте debouncing (задержку выполнения функций):

let timeoutId;
resizeObserver = new ResizeObserver(() => {
  clearTimeout(timeoutId);
  timeoutId = setTimeout(() => {
    // Здесь выполняется важный код
  }, 100);
});

Мастерство работы с CSS: советы

Несколько практических рекомендаций:

Целеустремленный выбор

Тщательная подготовка селекторов позволит избежать лишней нагрузки, особенно при работе с jQuery:

const $myElement = $('#myElement');
const resizeSensor = new ResizeSensor($myElement, function() {
  console.log('Размер элемента изменился!');
});

Не держитесь за старое

Старайтесь отказываться от устаревших методов, таких как плагины jQuery onresize или использование setInterval и setTimeout для контроля размеров. Вместо этого используйте современные API.

Визуализация

Сгенерируйте в голове картину: стол пинг-понга представляет собой веб-страницу. Мячик 🏓 ударяет об его край и меняет свои размеры от давления:

Пинг-понг стол:   [🔳🔲🔳🔲]
Удар мяча:        [🔳🔲🏓🔲]

Сенсорный стол (👀), регистрирующий изменения:

[🔳🔲🔳🔲] <- 🏓 -> [🔳🔲🏓🔲] 👀 "Ага, размер изменился!"

Сенсор (👀) — это наш ResizeObserver, который беспрестанно следит за изменениями размеров ваших DIV-блоков.

const pingPongSensor = new ResizeObserver(entries => {
  for (let entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Размеры пинг-понг стола изменились на: ${width}x${height}`);
  }
});
// "Внимание! Игра начинается!"
pingPongSensor.observe(document.querySelector('.pingPongTable'));

Полезные материалы

1. MDN – ResizeObserver — детальная информация об API ResizeObserver.
2. David Walsh – Resize Observer — анализ применения ResizeObserver в статье Дэвида Уолша.
3. Can I use – ResizeObserver — обзор поддержки ResizeObserver в разных браузерах.
4. Google's web.dev – ResizeObserver — мнение Google о мониторинге изменений размеров элементов.
5. GitHub – resize-observer-polyfill — полифилл для ResizeObserver, обеспечивающий поддержку API в любом браузере.