时间戳

首页 > 解决方案 > Vuetify 轮播图片加载

vue.js - Vuetify 轮播图片加载

问题描述

我想使用 vuetify 的轮播来显示一些图像。但是在第一次滑动时，过渡时会出现白色闪光，就像图像在尝试渲染之前没有加载一样。

<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

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

标签： vue.jsvuetify.js

解决方案

我发现 eager 属性是解决方案的一部分，而不是整个解决方案，因为它似乎只适用于嵌套内容。在 v-carousel-item 中嵌套一个 v-img 标签，并在两者上都带有 eager 属性，然后所有图像都会预加载。

<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 上的 height="100%" 对我有用。

推荐阅读