Элемент: событие contentvisibilityautostatechange

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

Новое

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

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

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

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

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте обработчик события.

addEventListener("contentvisibilityautostatechange", (event) => {});
oncontentvisibilityautostatechange = (event) => {};

Примечание: Объект события имеет тип ContentVisibilityAutoStateChangeEvent.

Примеры

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

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`contentvisibilityautostatechange_event`	108	108	130 124–130 Обработчик событий `oncontentvisibilityautostatechange` не поддерживается.	94	18	108	130 124–130 Обработчик событий `oncontentvisibilityautostatechange` не поддерживается.	73	18	21.0	108

См. также

© 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/Element/contentvisibilityautostatechange_event