验证旋转木马图像加载 [英] Vuetify carousel image loading

问题描述

我想使用Vutify的传送带显示一些图像。但在第一次滑动时，过渡时会出现白色闪烁，就像图像在尝试渲染之前没有加载一样。

<div id="app">
  <v-app id="inspire">
    <v-carousel>
      <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        :src="item.src"
      ></v-carousel-item>
    </v-carousel>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      items: [
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
        },
      ],
    }
  },
})

您可以看到我所说的内容的演示：https://codepen.io/gaalee89/pen/RwPQWXj

有没有办法解决这个问题？谢谢。

推荐答案

我发现急切属性是解决方案的的一部分，但不是整个解决方案，因为它似乎只适用于嵌套内容。 在v-carousel-item中嵌套一个v-img标签，同时在两个项目上都有eighge属性，然后所有图像都将预加载。

<div id="app">
  <v-app id="inspire">
    <v-carousel>
      <v-carousel-item
        v-for="(item,i) in items"
        :key="i"
        eager
      >
        <v-img :src="item.src" height="100%" eager/>
      </v-carousel-item>
    </v-carousel>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      items: [
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
        },
        {
          src: 'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
        },
      ],
    }
  },
})

然后需要调整布局，因为图像内容的行为会有所不同。v-img上的高度=&100%&q；适合我。

这篇关于验证旋转木马图像加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！