From 1c8384203c078ae2581c09814a9e324b8f127357 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 7 Oct 2021 23:23:58 -0400
Subject: [PATCH] Use lozad for lazy image loading
Ref: grouped-emoji-picker
---
package.json | 1 +
src/components/emoji_picker/emoji_picker.js | 6 +++++-
src/components/emoji_picker/emoji_picker.vue | 3 ++-
src/directives/lazy_image_container.js | 13 +++++++++++++
yarn.lock | 5 +++++
5 files changed, 26 insertions(+), 2 deletions(-)
create mode 100644 src/directives/lazy_image_container.js
diff --git a/package.json b/package.json
index e9a246b3..db702df6 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"diff": "3.5.0",
"escape-html": "1.0.3",
"localforage": "1.10.0",
+ "lozad": "^1.16.0",
"parse-link-header": "1.0.1",
"phoenix": "1.6.2",
"punycode.js": "2.1.0",
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 87e6495c..7b92db2e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -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,
@@ -63,6 +64,9 @@ const EmojiPicker = {
StickerPicker: defineAsyncComponent(() => import('../sticker_picker/sticker_picker.vue')),
Checkbox
},
+ directives: {
+ LazyImageContainer
+ },
methods: {
onStickerUploaded (e) {
this.$emit('sticker-uploaded', e)
@@ -183,7 +187,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)
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 8bbde389..b2477339 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -61,6 +61,7 @@
</div>
<div
ref="emoji-groups"
+ v-lazy-image-container
class="emoji-groups"
:class="groupsScrolledClass"
@scroll="onScroll"
@@ -86,7 +87,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" />
diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js
new file mode 100644
index 00000000..44adc828
--- /dev/null
+++ b/src/directives/lazy_image_container.js
@@ -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
diff --git a/yarn.lock b/yarn.lock
index 042d87ac..cf98fef3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6383,6 +6383,11 @@ lower-case@^1.1.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
+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@^4.0.1:
version "4.1.5"
resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"