ContentVisibilityAutoStateChangeEvent

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中无法正常工作。

ContentVisibilityAutoStateChangeEvent 接口是 contentvisibilityautostatechange 事件的事件对象，当任何具有 content-visibility: auto 设置的元素开始或停止 对用户相关 并 跳过其内容 时，该事件将在该元素上触发。

当元素不相关（在开始和结束事件之间）时，用户代理会跳过元素的渲染，包括布局和绘制。这可以显著提高页面渲染速度。contentvisibilityautostatechange 事件为应用程序代码提供了一种方法，可以在不需要时开始或停止渲染过程（例如，在 <canvas> 上绘制），从而节省处理能力。

请注意，即使从视图中隐藏，元素内容在语义上仍然是相关的（例如，对于辅助技术用户），因此此信号不应用于跳过重要的语义 DOM 更新。

Event ContentVisibilityAutoStateChangeEvent

构造函数

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 Containment 模块级别 2
# content-visibility-auto-state-change

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅