Don't render preview until image is loaded

This commit is contained in:
Pavel Djundik 2018-07-12 17:38:35 +03:00 committed by Pavel Djundik
parent b982623aaa
commit dbe95fcc13

View File

@ -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;