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属性