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 () { initializeLazyLoad () {
this.destroyLazyLoad() this.destroyLazyLoad()
this.$lozad = lozad('img', {}) this.$nextTick(() => {
this.$lozad.observe() this.$lozad = lozad('.still-image.emoji-picker-emoji', {
load: el => {
const vn = el.__vue__
if (!vn) {
return
}
vn.loadLazy()
}
})
this.$lozad.observe()
})
}, },
waitForDomAndInitializeLazyLoad () { waitForDomAndInitializeLazyLoad () {
this.$nextTick(() => this.initializeLazyLoad()) this.$nextTick(() => this.initializeLazyLoad())

View File

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

View File

@ -7,16 +7,23 @@ const StillImage = {
'imageLoadHandler', 'imageLoadHandler',
'alt', 'alt',
'height', 'height',
'width' 'width',
'dataSrc'
], ],
data () { data () {
return { return {
// for lazy loading, see loadLazy()
realSrc: this.src,
stopGifs: this.$store.getters.mergedConfig.stopGifs stopGifs: this.$store.getters.mergedConfig.stopGifs
} }
}, },
computed: { computed: {
animated () { 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 () { style () {
const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str const appendPx = (str) => /\d$/.test(str) ? str + 'px' : str
@ -27,7 +34,15 @@ const StillImage = {
} }
}, },
methods: { methods: {
loadLazy () {
if (this.dataSrc) {
this.realSrc = this.dataSrc
}
},
onLoad () { onLoad () {
if (!this.realSrc) {
return
}
const image = this.$refs.src const image = this.$refs.src
if (!image) return if (!image) return
this.imageLoadHandler && this.imageLoadHandler(image) 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 --> <!-- NOTE: key is required to force to re-render img tag when src is changed -->
<img <img
ref="src" ref="src"
:key="src" :key="realSrc"
:alt="alt" :alt="alt"
:title="alt" :title="alt"
:src="src" :data-src="dataSrc"
:src="realSrc"
:referrerpolicy="referrerpolicy" :referrerpolicy="referrerpolicy"
@load="onLoad" @load="onLoad"
@error="onError" @error="onError"