Use StillImage to render emojis in emoji picker

This commit is contained in:
Tusooa Zhu 2022-01-08 01:35:16 -05:00
parent c93da0b865
commit b77259a9a0
No known key found for this signature in database
GPG Key ID: 7B467EDE43A08224
4 changed files with 36 additions and 8 deletions

View File

@ -118,8 +118,19 @@ const EmojiPicker = {
},
initializeLazyLoad () {
this.destroyLazyLoad()
this.$lozad = lozad('img', {})
this.$nextTick(() => {
this.$lozad = lozad('.still-image.emoji-picker-emoji', {
load: el => {
const vn = el.__vue__
if (!vn) {
return
}
vn.loadLazy()
}
})
this.$lozad.observe()
})
},
waitForDomAndInitializeLazyLoad () {
this.$nextTick(() => this.initializeLazyLoad())

View File

@ -89,10 +89,11 @@
@click.stop.prevent="onEmoji(emoji)"
>
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
<img
<still-image
v-else
class="emoji-picker-emoji"
:data-src="emoji.imageUrl"
>
/>
</span>
<span :ref="'group-end-' + group.id" />
</div>

View File

@ -7,16 +7,23 @@ const StillImage = {
'imageLoadHandler',
'alt',
'height',
'width'
'width',
'dataSrc'
],
data () {
return {
// for lazy loading, see loadLazy()
realSrc: this.src,
stopGifs: this.$store.getters.mergedConfig.stopGifs
}
},
computed: {
animated () {
return this.stopGifs && (this.mimetype === 'image/gif' || this.src.endsWith('.gif'))
if (!this.realSrc) {
return false
}
return this.stopGifs && (this.mimetype === 'image/gif' || this.realSrc.endsWith('.gif'))
},
style () {
const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
@ -27,7 +34,15 @@ const StillImage = {
}
},
methods: {
loadLazy () {
if (this.dataSrc) {
this.realSrc = this.dataSrc
}
},
onLoad () {
if (!this.realSrc) {
return
}
const image = this.$refs.src
if (!image) return
this.imageLoadHandler && this.imageLoadHandler(image)

View File

@ -11,10 +11,11 @@
<!-- NOTE: key is required to force to re-render img tag when src is changed -->
<img
ref="src"
:key="src"
:key="realSrc"
:alt="alt"
:title="alt"
:src="src"
:data-src="dataSrc"
:src="realSrc"
:referrerpolicy="referrerpolicy"
@load="onLoad"
@error="onError"