Element: contentvisibilityautostatechange イベント

Baseline 2024

Newly available

Since ⁨September 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

contentvisibilityautostatechange イベントは、content-visibility: auto が設定されている要素に対して、ユーザーとの関連、コンテンツをスキップを開始または停止するときに発行されます。

要素が関係ない間（開始イベントと終了イベントの間）、ユーザーエージェントはレイアウトや描画を含む要素の描画をスキップし、ページの描画速度を大幅に向上させることができます。 contentvisibilityautostatechange イベントは、アプリのコードがレンダリング処理（例えば <canvas> への描画）を不要なときに開始または停止する方法を提供します。

非表示になっても要素のコンテンツは意味づけされたままなので（例えば支援技術ユーザーにとって）、この指示は重要な意味づけされた DOM の更新をスキップするために使用すべきではありません。

構文

このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

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

メモ: イベントオブジェクトの型は ContentVisibilityAutoStateChangeEvent です。

例

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) { // … }