Предзагрузка изображений

useImagePreloader() предзагружает пакет изображений перед навигацией — полезно для галерей и каруселей, где нужно, чтобы следующий слайд уже был закэширован к моменту, когда пользователь до него доберётся.

<script setup lang="ts">
import { useImagePreloader } from '@macrulez/vue-image-kit'

const { preload, progress, isComplete, errors } = useImagePreloader()

async function goToNextSlide() {
  await preload(['/slide-2.jpg', '/slide-3.jpg'])
  // Все изображения закэшированы — переход мгновенный
  currentSlide.value++
}
</script>

<template>
  <div v-if="!isComplete">Loading {{ progress }}%…</div>
</template>

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

preload

(urls: string[]) => Promise<void>. Запускает загрузку каждого URL из массива параллельно; резолвится, когда каждый либо загрузился, либо упал (никогда не реджектится — упавший URL записывается в errors). Повторный вызов сбрасывает loaded/errors и начинает новый пакет.

loaded

Ref<number>. Счётчик URL, которые уже определились (загрузились или упали) в текущем пакете.

total

ComputedRef<number>. Размер текущего пакета.

progress

ComputedRef<number>. 0–100, Math.round((loaded / total) * 100).

isComplete

ComputedRef<boolean>. true, когда каждый URL в пакете определился.

errors

Ref<string[]>. URL, которые не удалось загрузить, в порядке возникновения ошибок.

Учёт сети по умолчанию

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