From 9578b3152a1292973d8be5773be270a48f20fde5 Mon Sep 17 00:00:00 2001
From: cevznriny <57298997+cevznriny@users.noreply.github.com>
Date: Thu, 28 Oct 2021 21:20:59 +0200
Subject: [PATCH] lazy load images (#23)

* lazy load images

* lazy load videos

* bigger images
---
 gallery-card.js |  29 +++++++++++++++++++++++------
 placeholder.jpg | Bin 0 -> 4343 bytes
 2 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 placeholder.jpg

diff --git a/gallery-card.js b/gallery-card.js
index 48c00be..bbeb713 100644
--- a/gallery-card.js
+++ b/gallery-card.js
@@ -30,7 +30,7 @@ class GalleryCard extends LitElement {
           ${this.currentResourceIndex == undefined || !(this.config.show_reload ?? false) ?
             html`` : html`<ha-progress-button class="btn-reload" @click="${ev => this._loadResources(this._hass)}">Reload</ha-progress-button>` }
           <div class="resource-viewer" @touchstart="${ev => this._handleTouchStart(ev)}" @touchmove="${ev => this._handleTouchMove(ev)}" @keydown="${ev => this._keyNavigation(ev)}">
-            <figure>
+            <figure style="margin:5px;">
               ${
                 this._currentResource().isHass ?
                 html`<hui-image @click="${ev => this._popupCamera(ev)}"
@@ -53,7 +53,7 @@ class GalleryCard extends LitElement {
           <div class="resource-menu">
             ${this.resources.map((resource, index) => {
                 return html`
-                    <figure id="resource${index}" data-imageIndex="${index}" @click="${ev => this._selectResource(index)}" class="${(index == this.currentResourceIndex) ? 'selected' : ''}">
+                    <figure style="margin:5px;" id="resource${index}" data-imageIndex="${index}" @click="${ev => this._selectResource(index)}" class="${(index == this.currentResourceIndex) ? 'selected' : ''}">
                     ${
                       resource.isHass ?
                       html`<hui-image
@@ -62,8 +62,8 @@ class GalleryCard extends LitElement {
                           .cameraView=${"live"}
                         ></hui-image>` :
                       this._isImageExtension(resource.extension) ?
-                      html`<img src="${resource.url}"/>` :
-                      html`<video preload="none" src="${resource.url}#t=0.1" @loadedmetadata="${ev => this._videoMetadataLoaded(ev)}" @canplay="${ev => this._downloadNextMenuVideo()}"></video>`
+                      html`<img class="lzy_img" src="/local/community/gallery-card/placeholder.jpg" data-src="${resource.url}"/>` :
+					  html`<video class="lzy_video" preload="auto" data-src="${resource.url}#t=0.1" @loadedmetadata="${ev => this._videoMetadataLoaded(ev)}"></video>`
                     }
                     <figcaption>${resource.caption} <span class="duration"></span></figcaption>
                     </figure>
@@ -79,6 +79,14 @@ class GalleryCard extends LitElement {
   }
 
   updated(changedProperties) {
+    const arr = this.shadowRoot.querySelectorAll('img.lzy_img')
+    arr.forEach((v) => {
+        this.imageObserver.observe(v);
+    })
+    const varr = this.shadowRoot.querySelectorAll('video.lzy_video')
+    varr.forEach((v) => {
+        this.imageObserver.observe(v);
+    })
     // changedProperties.forEach((oldValue, propName) => {
     //   console.log(`${propName} changed. oldValue: ${oldValue}`);
     // });
@@ -95,6 +103,15 @@ class GalleryCard extends LitElement {
   }
 
   setConfig(config) {
+    this.imageObserver = new IntersectionObserver((entries, imgObserver) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                const lazyImage = entry.target
+                //console.log("lazy loading ", lazyImage)
+                lazyImage.src = lazyImage.dataset.src
+            }
+        })
+    });
     if (!config.entity && !config.entities) {
       throw new Error("Required configuration for entities is missing");
     }
@@ -595,11 +612,11 @@ class GalleryCard extends LitElement {
       }
       .resource-viewer .btn-left {
         left: 0%;
-        margin-left: 65px;
+        margin-left: 25px;
       }
       .resource-viewer .btn-right {
         right: 0%;
-        margin-right: 30px
+        margin-right: -10px
       }
       figure.selected {
         opacity: 0.5;
diff --git a/placeholder.jpg b/placeholder.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..fae8ed1983fa00fa754e08ddc4a116ab4967495f
GIT binary patch
literal 4343
zcmex=<NpH&0WUXCHwH#VMur3+WcdG(LCLiuGmU}4*Ox(yfq{VoC?~|g3}i6^AsGC>
z&EU+y#K;IjP{7Q}3<7K{EX=IzZ0zhH%)!ac$-%+J!OqUb%f-db0|e}xeEhsTd>}T+
z5Ri6|E+FFJVCMj-APxLKz#z!Mn8DP*%&5e`B*@4t$oT&VgFMi!tUw=uJOu@eOw25-
zY(OV*aRU`>6#zP)nVAXbSXLGmpz2znJOhg$tB|6hBb#twBD+$dh*9Ijg&fLG8xM*G
zUHqV8oK)1r$t5N(At|M*rmmr>WnyY(ZeeNV?BeR??&0Yb91<E99uXOpoRXTBo{^bV
zTvA$AUQt=q+|t_C-qG1LY4Vh*)27duIcw44B}<nrU$Ju4rp;TnZri?N=dMGCj~qRA
z{KUyqmo8tqdhPm+o3|c5di><+v*#~fzWVs-^OvvRzW@073*;|G24;x2;66k1mmttz
zOu#r`VF&q(k*OSrnFU!`6%E;h90S=C3x$=88aYIqCNA7~kW<+>=!0ld(M2vX6_bam
zA3<IN`;0h`HId~rxW^Fwy2Zf5%m|D;W<dsfhQEInb!jk+;?Xb|O#`E8U^ESkrh(Bk
dFq#HN)4*sN7)=ACX<#%BjHUq!(*X1Tn*iWii-G_E

literal 0
HcmV?d00001