ContentVisibilityAutoStateChangeEvent

Базовая версия 2024

Новое

С сентября 2024 года эта функция работает на последних версиях устройств и браузеров. Возможно, эта функция не будет работать на более старых устройствах или браузерах.

Интерфейс ContentVisibilityAutoStateChangeEvent — это объект события для события contentvisibilityautostatechange, которое срабатывает на любом элементе, у которого свойство content-visibility: auto установлено, когда он начинает или перестаёт быть актуальным для пользователя и пропускает его содержимое.

Пока элемент не актуален (между событиями начала и окончания), пользовательский агент пропускает отображение элемента, включая макет и отрисовку. Это значительно ускоряет отрисовку страницы. Событие contentvisibilityautostatechange предоставляет способ для кода приложения начать или остановить процессы отрисовки (например, рисование на <canvas>) когда они не нужны, тем самым экономя вычислительные ресурсы.

Обратите внимание, что даже когда элемент скрыт от просмотра, его содержимое останется семантически значимым (например, для пользователей с вспомогательными технологиями), поэтому этот сигнал не следует использовать для пропуска важных семантических обновлений DOM.

Конструктор

ContentVisibilityAutoStateChangeEvent(): Создаёт новый объект ContentVisibilityAutoStateChangeEvent.

Свойства экземпляра

Наследует свойства от своего родительского класса, Event.

skipped Только для чтения: Возвращает true, если пользовательский агент пропускает отрисовку элемента, или false в противном случае.

Примеры

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

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`ContentVisibilityAutoStateChangeEvent`	108	108	125	94	18	108	125	73	18	21.0	108
`ContentVisibilityAutoStateChangeEvent`	108	108	125	94	18	108	125	73	18	21.0	108
`skipped`	108	108	125	94	18	108	125	73	18	21.0	108

См. также

Событие contentvisibilityautostatechange
CSS Контейнирование
Свойство content-visibility
Свойство contain

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ContentVisibilityAutoStateChangeEvent