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

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

View File

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