Обнаружить изменение размера окна с помощью JavaScript?

125

Есть ли способ с помощью jQuery или JavaScript запускать функцию, когда пользователь заканчивает изменять размер окна браузера?

Другими словами:

Могу ли я обнаружить событие подъема мыши, когда пользователь изменяет размер окна браузера? В противном случае:
Могу ли я определить, когда операция изменения размера окна завершена?

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

javascript jquery

— aneuryzm
источник

3

Здесь есть решение jQuery и не-jQuery: github.com/louisremi/jquery-smartresize

— bradt

красивое решение для отмененных событий jquery-smartresize!

— тетри

@bradt, нет необходимости использовать плагин jQuery, если все это можно сделать достаточно легко на ванильном JavaScript

— Джеймс Дуглас,

240

Вы можете использовать, .resize()чтобы получать каждый раз, когда ширина / высота действительно изменяется, например:

$(window).resize(function() {
  //resize just happened, pixels changed
});

Здесь вы можете просмотреть рабочую демонстрацию , она принимает новые значения высоты / ширины и обновляет их на странице, чтобы вы могли их увидеть. Помните, что событие на самом деле не начинается и не заканчивается , оно просто «происходит», когда происходит изменение размера ... нечего сказать, что другого не произойдет.

Изменить: по комментариям кажется, что вам нужно что-то вроде «непрерывного» события, решение, которое вы нашли, делает это, с несколькими исключениями (вы не можете различить наведение мыши и паузу в кросс-браузере, то же самое для конца vs пауза ). Вы можете создать это событие, чтобы сделать его немного чище, например:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

У вас может быть где-то это базовый файл, что бы вы ни делали ... тогда вы можете привязаться к этому новому resizeEndсобытию, которое запускаете, например:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Вы можете увидеть рабочую демонстрацию этого подхода здесь

— Ник Крейвер
источник

1

Это зависит от браузера, когда и сколько запускается событие

— Крис Леркер,

@chris_l: Я не уверен, насколько точна эта страница ... откройте демонстрацию, которую я опубликовал в последней версии Firefox, она запускается каждый раз, когда здесь изменяется размер. У меня нет Opera для тестирования, она все еще может отличаться, но они, по крайней мере, более последовательны, чем предлагает quirksmode, я пришлю им записку, которую необходимо обновить.

— Ник Крейвер

@Nick: Да, страница quirksmode охватывает только FF до 3.1b2 - но это показывает, что это зависит от браузера ...

— Крис Леркер,

7

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

— Hoffmann

4

window.addEventListener ('изменение размера', функция () {}, истина);

— WebWanderer

3

Этого можно достичь с помощью свойства onresize интерфейса GlobalEventHandlers в JavaScript, назначив функцию свойству onresize , например:

window.onresize = functionRef;

Следующий фрагмент кода демонстрирует это, консоль регистрирует innerWidth и innerHeight окна при каждом изменении его размера. (Событие изменения размера запускается после изменения размера окна)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Развернуть фрагмент

— JSON C11
источник

3

Другой способ сделать это, используя только JavaScript, был бы следующим:

window.addEventListener('resize', functionName);

Это срабатывает каждый раз, когда изменяется размер, как и другой ответ.

functionName - имя функции, выполняемой при изменении размера окна (скобки в конце не нужны).

— Джеймс Дуглас
источник

0

Если вы хотите проверять только по окончании прокрутки, в Vanilla JS вы можете предложить следующее решение:

Супер супер компактный

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

Все 3 возможные комбинации вместе (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}

— Клаудио Ферраро
источник