From 826ec2d9f0c17ae6ab8517707f299d1843cea4da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 16 Jan 2021 18:30:04 +0100
Subject: [PATCH] rewrite VideoScrollImage.vue to be more vue-like, return
 visibility: hidden

https://engineering.linkedin.com/linkedin-ipad-5-techniques-smooth-infinite-scrolling-html5
---
 app/src/components/VideoScrollImage.vue | 53 ++++++++++++++++---------
 1 file changed, 35 insertions(+), 18 deletions(-)

diff --git a/app/src/components/VideoScrollImage.vue b/app/src/components/VideoScrollImage.vue
index 627d3e4..f18de8e 100644
--- a/app/src/components/VideoScrollImage.vue
+++ b/app/src/components/VideoScrollImage.vue
@@ -1,5 +1,5 @@
 <template>
-  <img ref="img" :src="currentSrc" class="video-scroll-image"/>
+  <img ref="img" :class="['video-scroll-image', {visible, displayed, loaded}]" :src="currentSrc"/>
 </template>
 
 <script lang="ts">
@@ -17,27 +17,34 @@ export default defineComponent({
       required: true
     }
   },
+  data() {
+    return {
+      currentSrc: undefined as undefined | string,
+      displayed: false,
+      loaded: false,
+    };
+  },
   watch: {
     visible() {
-      if (!this.img || !this.visible) {
+      if (!this.img) {
         return;
       }
-      console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
-      this.currentSrc = this.definition.fullres;
-      const grayTimeout = setTimeout(() => {
-        this.img!.classList.add("visible");
-        this.img!.style.background = "grey";
-      }, 3000);
-      this.img.onload = () => {
-        clearTimeout(grayTimeout);
-        this.img!.classList.add("visible");
-        this.img!.style.background = "none";
-        // if (this.isHorizontal) {
-        //   this.img!.style.height = "auto";
-        // } else {
-        //   this.img!.style.width = "auto";
-        // }
-      };
+      if (this.visible && !this.loaded) {
+        console.debug(`[VIDEOSCROLLIMAGE] Intersected, loading ${this.definition.fullres}`);
+        this.currentSrc = this.definition.fullres;
+        setTimeout(() => {
+          this.displayed = true;
+        }, 3000);
+        this.img.onload = () => {
+          this.displayed = true;
+          this.loaded = true;
+          // if (this.isHorizontal) {
+          //   this.img!.style.height = "auto";
+          // } else {
+          //   this.img!.style.width = "auto";
+          // }
+        };
+      }
     }
   },
   setup(props) {
@@ -62,11 +69,21 @@ export interface VideoScrollImageDef {
 .video-scroll-image {
   position: absolute;
   image-rendering: optimizeSpeed;
+  visibility: hidden;
   opacity: 0;
   transition: opacity .5s;
 }
 
 .video-scroll-image.visible {
+  visibility: visible !important;
+}
+
+.video-scroll-image.loaded {
+  background: transparent !important;
+}
+
+.video-scroll-image.displayed {
+  background: gray;
   opacity: 1 !important;
 }
 </style>