Nuxt，在图像加载时验证骨架加载器

Question

我找不到一个用骨架加载器加载映像的适当示例。我正在使用nuxt + Vuetify，并且我尝试使用一个简单的图像和一个骨架加载程序。

这是我的密码。

<template>
  <v-skeleton-loader v-if="loading" :loading="loading" type="image">
    <v-card
      v-show="loaded"
      class="ma-auto elevation-4"
      shaped
      color="darkgreen"
      width="500"
      flat
    >
      <v-img
        src="/products/em-lucky-combo.jpg"
        max-width="500"
        @load="hasLoaded"
      >
      </v-img>
    </v-card>
  </v-skeleton-loader>
</template>

我的方法

<script>
export default {
  methods: {
    hasLoaded() {
      console.log('Image finished loading')

      this.loading = false
      this.loaded = true
    },
  },
}
</script>

但是，正如我所说，当方法在v-card标记中或直接在骨架加载器中时，它就不会被调用。

我试过使用@load，也尝试过使用下面所示的挂载钩子。

<script>
export default {
  mounted() {
    const readyHandler = () => {
      if (document.readyState === 'complete') {
        console.log('Document Rendered')
        this.loading = false
        this.loaded = true
        document.removeEventListener('readystatechange', readyHandler)
      }
    }

    document.addEventListener('readystatechange', readyHandler)

    readyHandler() // in case the component has been instantiated lately after loading
  },
}
</script>

但似乎没有任何东西能正常或优雅地工作。难道这不可能吗？当<v-img>标记在框架加载程序中或在框架加载器内的v-card中时，无论我做什么，它都不会被呈现。一项建议是使用一个插槽。我猜它与插槽有关，但我不知道如何使用这些插槽。

我试过做这样的事。

<template v-slot:default>
  <v-card
    class="ma-auto elevation-4"
    shaped
    color="darkgreen"
    width="500"
    transition="fade-transition"
    flat
  >
    <v-img
      src="/products/em-lucky-combo.jpg"
      max-width="500"
      transition="fade-transition"
      @load="imageLoaded"
    ></v-img>
  </v-card>
</template>

我试过使用下面的代码。

How to make v-skeleton loader inside v-for in Vuetify

<v-img>
  <template #placeholder>
    <v-sheet>
      <v-skeleton-loader />
    </v-sheet>
  </template>
</v-img>

Answer 1

最后，OP已经足够使用一些维度和懒散的加载程序映像了。因为图像是局部的，所以不需要骨架。

<template>
  <v-card class="ma-auto elevation-4" flat shaped width="500">
    <v-img
      aspect-ratio="1"
      class="grey lighten-2"
      lazy-src=""
      max-height="350"
      max-width="500"
      src="/"
      transition="fade-transition"
    >
      <template v-slot:placeholder>
        <v-row
          align="center"
          class="fill-height ma-0"
          justify="center"
        >
          <v-progress-circular
            color="grey lighten-5"
            indeterminate
          ></v-progress-circular>
        </v-row>
      </template>
    </v-img>
  </v-card>
</template>

Answer 2

多亏了@kissu，我才意识到我的方法是错误的，也是不必要的。最后，我给我的图像设置了一些尺寸，并且使用了一个带有占位符槽的懒散图像加载器，它工作得很好。正如他提到的，我的图像是本地加载的，所以它在我的情况下不起作用。

我最后做了什么。

<template>
  <v-card class="ma-auto elevation-4" flat shaped width="500">
    <v-img
      aspect-ratio="1"
      class="grey lighten-2"
      lazy-src=""
      max-height="350"
      max-width="500"
      src="/"
      transition="fade-transition"
    >
      <template v-slot:placeholder>
        <v-row
          align="center"
          class="fill-height ma-0"
          justify="center"
        >
          <v-progress-circular
            color="grey lighten-5"
            indeterminate
          ></v-progress-circular>
        </v-row>
      </template>
    </v-img>
  </v-card>
</template>