feat(gallery): eager load first 10 images

Author: DerYeger

src/components/Gallery.vue

@@ -7,6 +7,7 @@ export interface GalleryImage {
   src: string
   alt: string
   aspectRatio: number
+  lazy: boolean
 }
 </script>
 
@@ -29,12 +30,12 @@ export interface GalleryImage {
         <img
           :src="image.src"
           :alt="image.alt"
-          loading="lazy"
+          :loading="image.lazy ? 'lazy' : 'eager'"
           decoding="async"
           oncontextmenu="return false"
           ondragstart="return false"
           on-touchstart="return false"
-          class="w-full shadow-2xl"
+          class="w-full select-none shadow-2xl"
         >
       </div>
     </MasonryWall>

src/pages/photography.astro

@@ -17,7 +17,7 @@ function getAltFromFilename(filename: string): string {
   return filename.substring(start, end).replace(/-/g, ' ')
 }
 
-const processedImages = rawImages.map(async (rawImage) => {
+const processedImages = rawImages.map(async (rawImage, index) => {
   const alt = getAltFromFilename(rawImage.src)
   const {
     src,
@@ -27,6 +27,7 @@ const processedImages = rawImages.map(async (rawImage) => {
     src,
     alt,
     aspectRatio: width / height,
+    lazy: index >= 10,
   }
 })