Lazy load preview images

NeKzor · May 21, 2024 · 1263892 · 1263892
1 parent 89dd2ae
commit 1263892
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 2 deletions.
diff --git a/src/server/app/assets/js/module.js b/src/server/app/assets/js/module.js
@@ -9,6 +9,25 @@ const minWidthBreakpoints = {
   md: 768,
 };
 
+const initPreviews = () => {
+  const previews = document.querySelectorAll('[x-preview]');
+  for (const preview of previews) {
+    preview.addEventListener(
+      'mouseover',
+      () => {
+        preview.src = preview.getAttribute('x-preview');
+      },
+      { once: true },
+    );
+  }
+};
+
+// Home
+
+if (location.pathname === '/') {
+  initPreviews();
+}
+
 // Navbar
 
 const navItemsLeft = document.getElementById('nav-items-left');
@@ -380,6 +399,7 @@ if (location.pathname.startsWith('/search') && location.search.length !== 0) {
     search.open();
   }
 
+  initPreviews();
   initShareModal();
 }
 
@@ -389,3 +409,9 @@ const goBackButton = document.getElementById('not-found-go-back');
 if (goBackButton) {
   goBackButton.addEventListener('click', () => history.back());
 }
+
+// Profile
+
+if (location.pathname.startsWith('/profile/')) {
+  initPreviews();
+}
diff --git a/src/server/app/components/VideoCard.tsx b/src/server/app/components/VideoCard.tsx
@@ -51,7 +51,7 @@ export const VideoCard = ({ video }: { video: VideoCardData }) => {
                 {video.video_preview_url && (
                   <img
                     className={tw`absolute top-0 left-0 opacity-0 transition-opacity duration-300 transform hover:opacity-100 object-cover w-full h-full rounded-[12px]`}
-                    src={video.video_preview_url}
+                    x-preview={video.video_preview_url}
                     alt='Preview of video'
                   />
                 )}

diff --git a/src/server/app/components/VideoRow.tsx b/src/server/app/components/VideoRow.tsx
@@ -92,7 +92,7 @@ export const VideoRow = ({ video }: { video: VideoRowData }) => {
                       {video.video_preview_url && (
                         <img
                           className={tw`absolute top-0 left-0 opacity-0 transition-opacity duration-300 transform hover:opacity-100 object-cover w-full h-full rounded-[12px]`}
-                          src={video.video_preview_url}
+                          x-preview={video.video_preview_url}
                           alt='Preview of video'
                         />
                       )}