mcg/mlpcardgame
2
0
Fork 0
Code Issues 23 Pull requests 1 Releases Wiki Activity

Only use placeholder if image doesn't load in 100ms
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse source
This commit is contained in:
Hamcha 2019-09-21 10:51:18 +02:00
parent f13f11d255
commit f72bab2143
Signed by: hamcha
GPG key ID: 41467804B19A3315
1 changed files with 12 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Cards/CardImage.vue
View file

@ -17,16 +17,23 @@ export default class CardImage extends Vue {
private loaded!: boolean; private loaded!: boolean;
private loadedURL!: string; private loadedURL!: string;
private loadedTimeout!: boolean;
private data() { private data() {
return { return {
loaded: false, loaded: false,
loadedURL: "" loadedURL: "",
loadedTimeout: false
}; };
} }
private mounted() { private mounted() {
this.fetchImage(); this.fetchImage();
setTimeout(() => {
if (!this.loaded) {
this.loadedTimeout = true;
}
}, 100);
this.$watch("id", () => { this.$watch("id", () => {
this.loaded = false; this.loaded = false;
this.fetchImage(); this.fetchImage();
@ -43,7 +50,10 @@ export default class CardImage extends Vue {
if (this.loaded) { if (this.loaded) {
return this.loadedURL; return this.loadedURL;
} }
return require("@/assets/images/cardback.webp"); if (this.loadedTimeout) {
return require("@/assets/images/cardback.webp");
}
return "";
} }
} }
</script> </script>