QIntersection отслеживание видимости

QIntersection — это компонент Quasar, предназначенный для отслеживания видимости элемента на экране. Он реализует обёртку над API Intersection Observer, предоставляя удобный способ реагировать на появление или исчезновение элементов из видимой области браузера. Основная задача QIntersection — определить, когда элемент пересекает границы видимой области, и уведомить об этом через событие @visibility.

<template>
  <q-intersection @visibility="handleVisibility">
    <div class="tracked-element">
      Контент для отслеживания
    </div>
  </q-intersection>
</template>

<script>
export default {
  methods: {
    handleVisibility(isVisible) {
      console.log('Элемент видим:', isVisible)
    }
  }
}
</script>

В данном примере метод handleVisibility получает один аргумент — булево значение true, если элемент видим, и false, если вышел из зоны видимости.

Ключевые свойства QIntersection

  1. once Булево значение. Если true, событие @visibility сработает один раз при первом появлении элемента на экране и больше не будет отслеживать изменения.

  2. margin Определяет отступы для области наблюдения в формате CSS, например: '0px 0px -50px 0px'. Отрицательные значения позволяют срабатывать раньше, чем элемент полностью войдёт в видимую область.

  3. throttle Время в миллисекундах для ограничения частоты срабатывания события. Полезно при динамических интерфейсах с частой прокруткой.

  4. debounce Позволяет задавать задержку перед срабатыванием события. Используется для сглаживания частых изменений видимости.

  5. horizontal Булево значение. Если true, наблюдение ведётся по горизонтальной оси, а не вертикальной.

Основные события

  • @visibility — основной event, который возвращает объект { isVisible, intersectionRatio }:

    • isVisible — логическое значение видимости элемента.
    • intersectionRatio — дробное число от 0 до 1, показывающее процент видимой области элемента.

Пример с использованием intersectionRatio для анимации:

<template>
  <q-intersection @visibility="animateElement">
    <div class="fade-box" :style="{ opacity: opacity }">
      Анимируемый контент
    </div>
  </q-intersection>
</template>

<script>
export default {
  data() {
    return {
      opacity: 0
    }
  },
  methods: {
    animateElement({ intersectionRatio }) {
      this.opacity = intersectionRatio
    }
  }
}
</script>

Практическое применение

  1. Ленивая загрузка изображений Используя QIntersection, можно загружать изображения только когда они становятся видимыми, снижая нагрузку на страницу:
<q-intersection @visibility="loadImage">
  <img v-if="imageLoaded" :src="imageUrl" />
</q-intersection>

<script>
export default {
  data() {
    return {
      imageLoaded: false,
      imageUrl: 'https://example.com/photo.jpg'
    }
  },
  methods: {
    loadImage(isVisible) {
      if (isVisible) this.imageLoaded = true
    }
  }
}
</script>
  1. Отслеживание видимости для аналитики Можно фиксировать, сколько раз пользователь видел определённый блок, или регистрировать события в системах аналитики:
<q-intersection @visibility="trackView">
  <div class="ad-banner">Рекламный блок</div>
</q-intersection>

<script>
export default {
  methods: {
    trackView(isVisible) {
      if (isVisible) {
        console.log('Блок виден пользователю')
        // отправка события в аналитику
      }
    }
  }
}
</script>
  1. Активация анимаций при прокрутке Можно плавно запускать CSS-анимации только когда элемент появляется в зоне видимости пользователя, экономя ресурсы.

Настройка зоны видимости через margin

Свойство margin позволяет управлять порогом срабатывания. Примеры:

  • '0px' — элемент считается видимым, когда пересекает любую точку viewport.
  • '0px 0px -100px 0px' — элемент срабатывает, когда нижняя часть ещё на 100px выше нижней границы экрана.
  • '50px' — элемент считается видимым только после того, как 50px его области войдут в видимую зону.

Важные рекомендации

  • Использовать throttle или debounce для элементов в длинных списках, чтобы избежать чрезмерных вызовов и падения производительности.
  • Для горизонтальной прокрутки установить horizontal: true.
  • При ленивой загрузке изображений и видео обязательно проверять, что ресурс ещё не загружен, чтобы не вызывать повторные запросы.
  • Для оптимизации часто встречающихся элементов использовать once: true, если событие должно сработать единожды.

QIntersection обеспечивает лёгкий и гибкий способ интеграции наблюдения за видимостью элементов в Quasar-приложениях, позволяя реализовывать ленивую загрузку, анимации и сбор аналитики без прямого использования низкоуровневого Intersection Observer API.

Оглавление