Use lozad for lazy image loading
Ref: grouped-emoji-picker
This commit is contained in:
parent
90f757cc6d
commit
c70cdbb873
@ -35,6 +35,7 @@
|
||||
"js-cookie": "3.0.1",
|
||||
"localforage": "1.10.0",
|
||||
"parse-link-header": "2.0.0",
|
||||
"lozad": "^1.16.0",
|
||||
"phoenix": "1.6.2",
|
||||
"punycode.js": "2.1.0",
|
||||
"qrcode": "1.5.0",
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import LazyImageContainer from '../../directives/lazy_image_container'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faBoxOpen,
|
||||
@ -64,6 +65,9 @@ const EmojiPicker = {
|
||||
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
|
||||
Checkbox
|
||||
},
|
||||
directives: {
|
||||
LazyImageContainer
|
||||
},
|
||||
methods: {
|
||||
onStickerUploaded (e) {
|
||||
this.$emit('sticker-uploaded', e)
|
||||
@ -184,7 +188,7 @@ const EmojiPicker = {
|
||||
this.showingStickers = value
|
||||
},
|
||||
limitedEmojis (list, groupId) {
|
||||
return list.slice(0, this.loadedCount[groupId])
|
||||
return list // list.slice(0, this.loadedCount[groupId])
|
||||
},
|
||||
filterByKeyword (list, keyword) {
|
||||
return filterByKeyword(list, keyword)
|
||||
|
@ -62,6 +62,7 @@
|
||||
</div>
|
||||
<div
|
||||
ref="emoji-groups"
|
||||
v-lazy-image-container
|
||||
class="emoji-groups"
|
||||
:class="groupsScrolledClass"
|
||||
@scroll="onScroll"
|
||||
@ -87,7 +88,7 @@
|
||||
<span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span>
|
||||
<img
|
||||
v-else
|
||||
:src="emoji.imageUrl"
|
||||
:data-src="emoji.imageUrl"
|
||||
>
|
||||
</span>
|
||||
<span :ref="'group-end-' + group.id" />
|
||||
|
13
src/directives/lazy_image_container.js
Normal file
13
src/directives/lazy_image_container.js
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
import lozad from 'lozad'
|
||||
|
||||
const LazyImageContainer = {
|
||||
inserted (el) {
|
||||
const images = el.querySelectorAll('img')
|
||||
console.log(images.length)
|
||||
el.$observer = lozad(images)
|
||||
el.$observer.observe()
|
||||
}
|
||||
}
|
||||
|
||||
export default LazyImageContainer
|
@ -5733,6 +5733,11 @@ lower-case@^2.0.2:
|
||||
dependencies:
|
||||
tslib "^2.0.3"
|
||||
|
||||
lozad@^1.16.0:
|
||||
version "1.16.0"
|
||||
resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
|
||||
integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
|
||||
|
||||
lru-cache@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
|
||||
|
Loading…
Reference in New Issue
Block a user