diff --git a/app/src/components/VideoScroll.vue b/app/src/components/VideoScroll.vue
index 6c878ed..899a150 100644
--- a/app/src/components/VideoScroll.vue
+++ b/app/src/components/VideoScroll.vue
@@ -36,12 +36,17 @@ export default defineComponent({
     onMounted(() => {
       const observer = new IntersectionObserver((entries, observer) => {
         entries.forEach((entry) => {
+          const element = entry.target as HTMLImageElement;
           if (entry.isIntersecting) {
-            const element = entry.target as HTMLImageElement;
-            element.src = element.dataset.src!;
-            element.onload = () => {
-              element.classList.add("visible");
-            };
+            element.classList.add("visible");
+            if (!element.src) {
+              element.src = element.dataset.src!;
+              element.onload = () => {
+                element.classList.add("loaded");
+              };
+            }
+          } else {
+            element.classList.remove("visible");
           }
         });
       }, {rootMargin: "100px"});
@@ -90,9 +95,14 @@ function getMeta(url: string): Promise<HTMLImageElement> {
   image-rendering: optimizeSpeed;
   opacity: 0;
   transition: opacity .5s;
+  visibility: hidden;
+}
+
+.loaded {
+  opacity: 1 !important;
 }
 
 .visible {
-  opacity: 1 !important;
+  visibility: visible !important;
 }
 </style>