Element: contentvisibilityautostatechange イベント
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
contentvisibilityautostatechange
イベントは、content-visibility: auto
が設定されている要素に対して、ユーザーとの関連、コンテンツをスキップを開始または停止するときに発行されます。
要素が関係ない間(開始イベントと終了イベントの間)、ユーザーエージェントはレイアウトや描画を含む要素の描画をスキップし、ページの描画速度を大幅に向上させることができます。
contentvisibilityautostatechange
イベントは、アプリのコードがレンダリング処理(例えば <canvas>
への描画)を不要なときに開始または停止する方法を提供します。
非表示になっても要素のコンテンツは意味づけされたままなので(例えば支援技術ユーザーにとって)、この指示は重要な意味づけされた DOM の更新をスキップするために使用すべきではありません。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
js
addEventListener("contentvisibilityautostatechange", (event) => {});
oncontentvisibilityautostatechange = (event) => {};
メモ:
イベントオブジェクトの型は ContentVisibilityAutoStateChangeEvent
です。
例
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) {
// …
}
仕様書
Specification |
---|
CSS Containment Module Level 2 # content-visibility-auto-state-change |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
ContentVisibilityAutoStateChangeEvent
- CSS Containment
- The
content-visibility
property - The
contain
property