Определение видимости

useLazyLoad(options?) — низкоуровневый composable на IntersectionObserver, на котором построен useImage(). Доступен напрямую для всего, чему нужно просто состояние «попал ли элемент во вьюпорт» без остальной части конечного автомата useImage.

import { useLazyLoad } from '@macrulez/vue-image-kit'

const { isIntersecting, observe } = useLazyLoad({ rootMargin: '300px' })

Опции

rootMargin

string · по умолчанию: '200px'. rootMargin для IO.

threshold

number · по умолчанию: 0. threshold для IO.

Возвращаемое значение

isIntersecting

Ref<boolean>. true, как только наблюдаемый элемент попадает во вьюпорт (согласно rootMargin/threshold). Остаётся true после первого пересечения — observer отключается сам после срабатывания, это одноразовый сигнал «появился ли уже», а не непрерывное отслеживание видимости.

observe

(el: Ref<HTMLElement | null>) => void. Начинает наблюдение за элементом. Безопасно вызывать в setup() до монтирования элемента — если ref ещё не заполнен, наблюдение автоматически откладывается до следующего микротаска. Повторный вызов observe с новым элементом сначала снимает предыдущий observer.

На сервере isIntersecting сразу (и навсегда) равен true, а observe() — no-op — именно это заставляет SSR-вывод рендериться как «уже видимый», вместо ожидания API, которого на сервере не существует. Оба useImage() и useBackgroundImage() вызывают этот composable напрямую для собственного определения видимости. Директива v-lazy-img следует тому же SSR-контракту, но реализует собственную логику IntersectionObserver отдельно (директива не может вызывать composable).