元素：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属性