Yavook.de/node-fftcg
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Card Image lazy load

Browse source
This commit is contained in:
Jörn-Michael Miehe 2019-05-15 02:05:53 +02:00
parent 310f08dc39
commit 4c32aaf1b5
1 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/Card.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<v-list-tile avatar> <v-list-tile avatar>
<v-tooltip bottom> <v-tooltip @input="booted = true" bottom>
<template v-slot:activator="{ on }"> <template v-slot:activator="{ on }">
<v-list-tile-avatar :color="color" v-on="on"> <v-list-tile-avatar :color="color" v-on="on">
<span class="headline font-weight-bold white--text"> <span class="headline font-weight-bold white--text">
@ -8,7 +8,13 @@
</span> </span>
</v-list-tile-avatar> </v-list-tile-avatar>
</template> </template>
<v-img :src="ffiurl" :height="300" :width="0.715 * 300" contain /> <v-img
v-if="booted"
:src="ffiurl"
:height="300"
:width="0.715 * 300"
contain
/>
</v-tooltip> </v-tooltip>
<v-list-tile-content> <v-list-tile-content>
@ -32,6 +38,10 @@ export default {
dbentry: Object dbentry: Object
}, },
data: () => ({
booted: false
}),
computed: { computed: {
color() { color() {
switch (this.dbentry.element.toLowerCase()) { switch (this.dbentry.element.toLowerCase()) {