rework classes to be more semantic, images outside of viewport are hidden

app/src/components/SVGContent.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="svg-content">
-    <div :class="['loading', {loaded: loadedPercent === 100}]">
+    <div :class="['loading-screen', {loaded: loadedPercent === 100}]">
       <div :style="{width: `${loadedPercent}%`}" class="loading-bar"></div>
     </div>
     <div class="content" ref="root">
@@ -451,7 +451,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
   visibility: hidden;
 }
 
-.loading {
+.loading-screen {
   position: fixed;
   top: 0;
   left: 0;
@@ -462,7 +462,7 @@ function processStart(svg: XMLDocument): SVGRectElement | null {
   opacity: 1;
 }
 
-.loaded {
+.loading-screen.loaded {
   opacity: 0 !important;
 }
 

app/src/components/VideoScroll.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="video-scroll" ref="root">
-    <img class="visible loaded"
+    <img class="visible displayed loaded"
          :src="definition.files[0]"
          :style="{
               top: `${Math.round(definition.top)}px`,
@@ -70,17 +70,16 @@ export default defineComponent({
       entries.forEach((entry) => {
         const element = entry.target as HTMLImageElement;
         if (entry.isIntersecting) {
+          element.classList.add("visible");
           if (!element.src) {
             console.debug(`[VIDEOSCROLL] Intersected, loading ${element.dataset.src}`);
             element.src = element.dataset.src!;
-            const grayTimeout = setTimeout(() => {
-              element.classList.add("visible");
-              element.style.background = "grey";
+            setTimeout(() => {
+              element.classList.add("displayed");
             }, 3000);
             element.onload = () => {
-              clearTimeout(grayTimeout);
-              element.classList.add("visible");
-              element.style.background = "none";
+              element.classList.add("displayed");
+              element.classList.add("loaded");
               if (this.isHorizontal) {
                 element.style.height = "auto";
               } else {
@@ -88,6 +87,8 @@ export default defineComponent({
               }
             };
           }
+        } else {
+          element.classList.remove("visible");
         }
       });
     });
@@ -117,16 +118,25 @@ export interface VideoScrollDef {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style>
 .video-scroll img {
   position: absolute;
   image-rendering: optimizeSpeed;
+  background: grey;
+  visibility: hidden;
   opacity: 0;
   transition: opacity .5s;
 }
 
-.visible {
+.video-scroll img.visible {
+  visibility: visible !important;
+}
+
+.video-scroll img.displayed {
   opacity: 1 !important;
 }
 
+.video-scroll img.loaded {
+  background: transparent !important;
+}
 </style>