client/src/components/utilities/BackgroundImageLoader.vue

34 lines
854 B
Vue

<template>
<div style="display: none">
<img
v-for="(url, index) in imageUrls"
:key="index"
:src="url"
alt=""
@load="handleImageLoad(index)"
@error="handleImageError(index)"
/>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// Internal array of images to preload
const imageUrls = ref<string[]>([
'/assets/ui-elements/ui-border-4-corners.svg',
'/assets/ui-elements/ui-border-4-corners-light.svg',
'/assets/ui-elements/ui-border-4-corners-small.svg'
])
const loadedImages = ref<Set<number>>(new Set())
const handleImageLoad = (index: number) => {
loadedImages.value.add(index)
console.log(`Image ${index} loaded:`, imageUrls.value[index])
}
const handleImageError = (index: number) => {
console.log(`Image ${index} failed to load:`, imageUrls.value[index])
}
</script>