元素：contentvisibilityautostatechange 事件
當帶有 content-visibility: auto 的元素開始或停止與使用者相關並跳過其內容時，就會在這些元素上觸發 contentvisibilityautostatechange 事件。
當元素不相關時（在開始和結束事件之間），使用者代理會跳過元素的渲染，包括佈局和繪製，這可以顯著提高頁面的渲染速度。contentvisibilityautostatechange 事件提供了一種方式，可以讓應用程式的程式碼在不需要時也開始或停止渲染程序（例如，在 <canvas> 上繪製），從而節省處理能力。
請注意，即使元素在檢視之外，其內容仍然在語義上是相關的（例如，對於輔助技術使用者），因此不應使用此訊號來跳過重要的語義 DOM 更新。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("contentvisibilityautostatechange", (event) => { })
oncontentvisibilityautostatechange = (event) => { }
事件型別
示例
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 |
瀏覽器相容性
載入中…
另見
ContentVisibilityAutoStateChangeEvent- CSS 包含
content-visibility屬性contain屬性