smoothly show loading images

app/src/components/VideoScroll.vue

@@ -39,6 +39,9 @@ export default defineComponent({
           if (entry.isIntersecting) {
             const element = entry.target as HTMLImageElement;
             element.src = element.dataset.src!;
+            element.onload = () => {
+              element.classList.add("visible");
+            };
           }
         });
       }, {rootMargin: "100px"});
@@ -85,5 +88,11 @@ function getMeta(url: string): Promise<HTMLImageElement> {
 .video-scroll img {
   position: absolute;
   image-rendering: optimizeSpeed;
+  opacity: 0;
+  transition: opacity .5s;
+}
+
+.visible {
+  opacity: 1 !important;
 }
 </style>