Element: contentvisibilityautostatechange-Ereignis

Baseline 2024

Neu verfügbar

Seit September 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das contentvisibilityautostatechange-Ereignis wird für jedes Element ausgelöst, für das content-visibility: auto festgelegt ist, wenn es beginnt oder aufhört, für den Benutzer relevant zu sein, und seine Inhalte übersprungen werden beziehungsweise nicht mehr übersprungen werden.

Solange das Element nicht relevant ist (zwischen den Ereignissen für Beginn und Ende), überspringt der User Agent das Rendering des Elements, einschließlich Layout und Zeichnen. Dies kann die Rendering-Geschwindigkeit der Seite erheblich verbessern. Das contentvisibilityautostatechange-Ereignis ermöglicht es dem Code einer Anwendung außerdem, Rendering-Prozesse (z. B. das Zeichnen auf einem <canvas>) zu starten oder zu stoppen, wenn sie nicht benötigt werden, und so Rechenleistung zu sparen.

Beachten Sie, dass die Inhalte eines Elements auch dann semantisch relevant bleiben, wenn das Element nicht sichtbar ist (z. B. für Benutzer unterstützender Technologien). Dieses Signal sollte daher nicht verwendet werden, um wichtige semantische DOM-Aktualisierungen zu überspringen.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

addEventListener("contentvisibilityautostatechange", (event) => { })

Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

oncontentvisibilityautostatechange = (event) => { }

Ereignistyp

Ein ContentVisibilityAutoStateChangeEvent.

Beispiele

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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden