Javascript resize – beim Verkleinern / Vergrößern des Browserfensters

Browserfenster / Container verkleinern oder vergrößern

resize wurde schon früh von allem Browsern zuverlässig unterstützt und war eine Ergänzung der Media Querys der frühen responsive Webseiten. Mit den jüngeren CSS-Funktionen wie Container Queries und Eigenschaften wie display: flex oder display: grid wird das resize-Event heute nur noch selten gebraucht. Media Queries übernehmen die Anpassung von Bildern, die sie automatisch an den verfügbaren Platz anpassen.

resize feuert auf window und body

resize feuert in allen Browsern nur bei Events auf window oder body. Das genügte den meisten responsiven Anwendungen – das Abfangen von eines resize-Events auf anderen Elementen als window oder body ist selten gefragt.

Das resize-Event in Javascript feuert kontinuierlich. Bei den hohen Anforderungen an die Performance ist heute der Resize Observer die bessere Alternative, um Größenänderungen von Elementen erkennen. Zur Anwendung kommt das resize-Event z.B. noch z.B. für die Neuberechnung von Canvas und während Tests des Layouts, um das korrekte Verhalten bei Breakpoints zu prüfen.

resize – Eigenschaften

target

Das Objekt, zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

Nein

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist

Größe des Browserfensters bei resize

• Firefox, Opera, Safari & Co.: Die Größe des Browserfensters lässt sich mit window.innerWidth und window.innerWidth auslesen.

resize Performance – Debouncing

Da resize mit einer hohen Wiederholrate feuert, kann die Frequenz mit setTimeout oder requestAnimationFrame reduziert werden (debouncing).

Hier werden die Aktionen beim resize durch einen Delay ausgebremst:

const width = document.getElementById("width");
const height = document.getElementById("height");
const actions = document.getElementById("actions");

const delay = 250;           // Delay zwischen den Aufrufen
let throttled = false;

// window.resize callback
function getDimensions() {
	width.innerHTML = window.innerWidth;
	height.innerHTML = window.innerHeight;
	let action = parseInt(document.querySelector ("#actions").innerHTML);
	actions.innerHTML = action + 1;
}

// window.resize event listener
window.addEventListener('resize', function() {
	if (!throttled) {      // erster Aufruf ist noch nicht ausgebremst
		getDimensions();   // Breite / Höhe auslesen
    
		throttled = true;  // ab jetzt wird die resize-Abfrage ausgebremst
    
		setTimeout(function() {  // timeout, um throttled auszuschalten
			throttled = false;
		}, delay);
	}  
});

getDimensions();

resize und orientationchange

resize feuert auch bei einem orientationchange-Event.

   // Entdeckt, ob das Gerät das orientationchange-Event unterstützt
   // Fallback auf resize, falls nicht
   let supportsOrientationChange = "onorientationchange" in window,
      orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

   window.addEventListener(orientationEvent, function() {
      alert('HOLY ROTATING SCREENS BATMAN:' + window.orientation + " " + screen.width);
   }, false);

Quelle Detect rotation of Android phone in the browser with JavaScript auf Stackoverflow.

Warum das resize-Event heute kaum noch benutzt wird

Bei aufwändigen Aktionen ist das kontinuierliche Feuern von des resize-Events eine hohe Last für den Browser – z.B. auch wenn das Layout der Seite bei Änderungen an die Fenstergröße angepasst wird.

resizeObserver vs resize-Event

Das resize-Event wirkt nur auf dem window- und document-Objekt, nicht aber auf HTML-Elementen wie div und iframe. Aber neben dem intersectionObserver gibt es ein weiteres Application Interface: resizeObserver.

Der resizeObserver ähnelt dem intersectionObserver und ist weniger invasiv wie die Abfrage mit dem resize-Event, wenn es darum geht, das Ändern von Breite und Höhe eines Elements abzufangen. Alle modernen Browser.