Как во vue 3 повесить прелоадер до полной загрузки картинки?

Question

[kmv-dev]

Отрисовка компонента post идет через v-for - в каждом может быть по 4 изображения и иногда картинки очень долго прогружаются сверху вниз, что не очень красиво. В инете нашел что-то типа:
const img = new Image();
img.onload = () => isLoaded.value = true;
img.src = image;
но как делать в случае с рендером v-for и кучей картинок в каждом item? Кто-нибудь сталкивался?

Answer 1

[Gutnov]

Можно сделать компонент-обертку для картинок и использовать его внутри post

<!-- ImageWrapper.vue -->

<template>
  <div>
    <img v-if="isLoaded" :src="src" />
    <div v-else class="placeholder">Загрузка...</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  src: {
    type: String,
    required: true
  }
});

const isLoaded = ref(false);

const loadImage = () => {
  const img = new Image();
  img.onload = () => {
    isLoaded.value = true;
  };
  img.src = props.src;
};

onMounted(() => {
  loadImage();
});
</script>

<!-- Post.vue -->
<template>
  <div class="post">
    <ImageWrapper
      v-for="image in postData.images"
      :key="image.id
      :src=image.src"
    />
  </div>
</template>

<Post
  v-for="post in posts"
  :key="post.id"
  :postData="post"
/>