Don't render preview until image is loaded
This commit is contained in:
parent
b982623aaa
commit
dbe95fcc13
@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="link.shown && link.canDisplay"
|
||||
v-if="link.shown"
|
||||
v-show="link.canDisplay"
|
||||
ref="container"
|
||||
class="preview">
|
||||
<div
|
||||
@ -18,6 +19,8 @@
|
||||
decoding="async"
|
||||
alt=""
|
||||
class="thumb"
|
||||
@error="onThumbnailError"
|
||||
@abort="onThumbnailError"
|
||||
@load="onPreviewReady">
|
||||
</a>
|
||||
<div class="toggle-text">
|
||||
@ -135,6 +138,23 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
// Don't display previews while they are loading on the server
|
||||
if (this.link.type === "loading") {
|
||||
return;
|
||||
}
|
||||
|
||||
// Error don't have any media to render
|
||||
if (this.link.type === "error") {
|
||||
this.onPreviewReady();
|
||||
}
|
||||
|
||||
// If link doesn't have a thumbnail, render it
|
||||
if (this.link.type === "link" && !this.link.thumb) {
|
||||
this.onPreviewReady();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPreviewReady() {
|
||||
const options = require("../js/options");
|
||||
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
|
||||
|
||||
@ -153,10 +173,10 @@ export default {
|
||||
this.showMoreButton = this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onPreviewReady() {
|
||||
// TODO: Instead of forcing scroll position, wait for image to load before showing it
|
||||
this.$parent.$parent.$emit("keepScrollPosition");
|
||||
onThumbnailError() {
|
||||
// If thumbnail fails to load, hide it and show the preview without it
|
||||
this.link.thumb = "";
|
||||
this.onPreviewReady();
|
||||
},
|
||||
onMoreClick() {
|
||||
this.isContentShown = !this.isContentShown;
|
||||
|
Loading…
Reference in New Issue
Block a user