From c70cdbb873eb77bc1aaf7edb9defdda59bdba1e1 Mon Sep 17 00:00:00 2001 From: Tusooa Zhu 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 50a6b55f83..06fb491638 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js index 8e11f83f68..82e5ad0b7e 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, @@ -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) diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue index 7b2b7fc83c..0e6c7e41e6 100644 --- a/src/components/emoji_picker/emoji_picker.vue +++ b/src/components/emoji_picker/emoji_picker.vue @@ -62,6 +62,7 @@
{{ emoji.replacement }} diff --git a/src/directives/lazy_image_container.js b/src/directives/lazy_image_container.js new file mode 100644 index 0000000000..44adc828db --- /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 2fefe76f24..041fc1dc4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"