Element: contentvisibilityautostatechange Ereignis

Das contentvisibilityautostatechange-Ereignis wird auf einem Element ausgelöst, das die Eigenschaft content-visibility: auto gesetzt hat, wenn es beginnt oder aufhört, für den Benutzer relevant zu sein und seine Inhalte überspringt.

Während das Element nicht relevant ist (zwischen den Start- und Endereignissen), überspringt der Benutzeragent das Rendering des Elements, einschließlich Layout und Malen, was die Geschwindigkeit des Renderings der Seite erheblich verbessern kann. Das contentvisibilityautostatechange-Ereignis bietet eine Möglichkeit, dass der Code einer App auch Rendering-Prozesse starten oder stoppen kann (z. B. Zeichnen auf einem <canvas>), wenn diese nicht benötigt werden, um Rechenleistung zu sparen.

Beachten Sie, dass selbst wenn die Inhalte aus der Sicht verborgen sind, sie semantisch relevant bleiben (z. B. für Benutzer von unterstützenden Technologien), sodass dieses Signal nicht verwendet werden sollte, um wesentliche semantische DOM-Updates zu überspringen.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignis-Handler-Eigenschaft.

js
addEventListener("contentvisibilityautostatechange", (event) => {});
oncontentvisibilityautostatechange = (event) => {};

Hinweis: Das Ereignisobjekt ist vom Typ ContentVisibilityAutoStateChangeEvent.

Beispiele

js
const canvasElem = document.querySelector("canvas");

canvasElem.addEventListener("contentvisibilityautostatechange", stateChanged);
canvasElem.style.contentVisibility = "auto";

function stateChanged(event) {
  if (event.skipped) {
    stopCanvasUpdates(canvasElem);
  } else {
    startCanvasUpdates(canvasElem);
  }
}

// Call this when the canvas updates need to start.
function startCanvasUpdates(canvas) {
  // …
}

// Call this when the canvas updates need to stop.
function stopCanvasUpdates(canvas) {
  // …
}

Spezifikationen

Specification
CSS Containment Module Level 2
# content-visibility-auto-state-change

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
contentvisibilityautostatechange event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.

Siehe auch