ContentVisibilityAutoStateChangeEvent
ContentVisibilityAutoStateChangeEvent 介面是 contentvisibilityautostatechange 事件的事件物件。當任何設定了 content-visibility: auto 的元素開始或停止與 使用者相關 並 跳過其內容 時，就會觸發此事件。
當元素不相關時（在開始和結束事件之間），使用者代理會跳過元素的渲染，包括佈局和繪製。這可以顯著提高頁面渲染速度。 contentvisibilityautostatechange 事件提供了一種方法，讓應用程式程式碼也可以在不需要時啟動或停止渲染程序（例如，在 <canvas> 上繪製），從而節省處理能力。
請注意，即使元素在檢視之外，其內容在語義上仍然是相關的（例如，對於輔助技術使用者），因此不應使用此訊號來跳過重要的 DOM 語義更新。
建構函式
ContentVisibilityAutoStateChangeEvent()-
建立一個新的
ContentVisibilityAutoStateChangeEvent物件例項。
例項屬性
繼承其父級 Event 的屬性。
skipped只讀-
如果使用者代理正在跳過元素的渲染，則返回
true，否則返回false。
示例
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) {
// …
}
規範
| 規範 |
|---|
| CSS 包含模組第 2 級 # content-visibility-auto-state-change |
瀏覽器相容性
載入中…
另見
contentvisibilityautostatechange事件- CSS 包含
content-visibility屬性contain屬性