Недавно у меня была проблема - я пытался сделать красивое появление картинки, после ее загрузки. Но не мог это сделать при анимированном page transition. И до этого при больших списках элементов не все было гладко. Теперь же я понял в чем была ошибка - нужно было использовать onMounted)
компонент BaseImage
<script setup lang="ts">
...
const props = defineProps({
...
})
let isLoaded = ref<boolean>(false)
function onLoad(): void {
isLoaded.value = true
}
onMounted(async (): Promise<void> => {
await nextTick()
onLoad()
})
</script>
<template>
<div :class="cn('relative', props.aspectRatio)">
<div :class="cn({ 'opacity-0': isLoaded },'absolute left-0 top-0 w-full h-full transition-opacity duration-500', props.placeholder)"></div>
<NuxtPicture
:src="props.src"
class="w-full h-full object-cover object-top"
:img-attrs="{class:'w-full h-full object-cover object-top'}"
quality="90"
:width="props.width"
:height="props.height"
:alt="props.alt"
:loading="props.loading"
@load="onLoad"
/>
</div>
</template>
Жаль тут нет красивого показа кода, но словами скажу обратить внимание как сделан onMounted - именно так он сработает.
