🌟 make first image eager to load

MorganKryze · Apr 17, 2024 · 22f5db7 · 22f5db7
1 parent bf8f32f
commit 22f5db7
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/src/src/components/GalleryImage.astro b/src/src/components/GalleryImage.astro
@@ -4,14 +4,15 @@ import "../animations/hide.astro";
 
 interface Props {
   image: string;
+  loading?: 'lazy' | 'eager';
 }
 
-const { image } = Astro.props;
+const { image, loading = 'lazy' } = Astro.props;
 ---
 
 <img
   src={`/Portfolio${image}`}
   alt="gallery"
   class="w-full object-cover rounded-md hide-2"
-  loading="lazy"
-/>
+  loading={loading}
+/>
diff --git a/src/src/pages/collections/france.astro b/src/src/pages/collections/france.astro
@@ -20,8 +20,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
   nextCollectionLink="sardegna"
 >
   <div id="Column-Left" class="flex flex-col gap-6">
-    <GalleryImage image="/img/france/im3.jpg" />
-    <GalleryImage image="/img/france/im7.jpg" />
+    <GalleryImage image="/img/france/im3.jpg" loading="eager" />
+    <GalleryImage image="/img/france/im7.jpg" loading="eager" />
     <GalleryImage image="/img/france/im21.jpg" />
     <GalleryImage image="/img/france/im8.jpg" />
     <GalleryImage image="/img/france/im26.jpg" />
@@ -40,8 +40,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/france/im55.jpg" />
   </div>
   <div id="Column-Center" class="flex flex-col gap-6">
-    <GalleryImage image="/img/france/im5.jpg" />
-    <GalleryImage image="/img/france/im6.jpg" />
+    <GalleryImage image="/img/france/im5.jpg" loading="eager" />
+    <GalleryImage image="/img/france/im6.jpg" loading="eager" />
     <GalleryImage image="/img/france/im2.jpg" />
     <GalleryImage image="/img/france/im9.jpg" />
     <GalleryImage image="/img/france/im45.jpg" />
@@ -61,8 +61,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/france/im51.jpg" />
   </div>
   <div id="Column-Right" class="flex flex-col gap-6">
-    <GalleryImage image="/img/france/im4.jpg" />
-    <GalleryImage image="/img/france/im1.jpg" />
+    <GalleryImage image="/img/france/im4.jpg" loading="eager" />
+    <GalleryImage image="/img/france/im1.jpg" loading="eager" />
     <GalleryImage image="/img/france/im23.jpg" />
     <GalleryImage image="/img/france/im10.jpg" />
     <GalleryImage image="/img/france/im24.jpg" />

diff --git a/src/src/pages/collections/sardegna.astro b/src/src/pages/collections/sardegna.astro
@@ -19,25 +19,25 @@ import CollectionLayout from "../../layouts/CollectionLayout.astro";
   nextCollectionLink="ireland"
 >
   <div id="Column-Left" class="flex flex-col gap-6">
-    <GalleryImage image="/img/sardegna/im38.jpg" />
-    <GalleryImage image="/img/sardegna/im59.jpg" />
+    <GalleryImage image="/img/sardegna/im38.jpg" loading="eager" />
+    <GalleryImage image="/img/sardegna/im59.jpg" loading="eager" />
     <GalleryImage image="/img/sardegna/im20.jpg" />
     <GalleryImage image="/img/sardegna/im18.jpg" />
     <GalleryImage image="/img/sardegna/im37.jpg" />
 
     <GalleryImage image="/img/sardegna/im3.jpg" />
   </div>
   <div id="Column-Center" class="flex flex-col gap-6">
-    <GalleryImage image="/img/sardegna/im45.jpg" />
-    <GalleryImage image="/img/sardegna/im29.jpg" />
+    <GalleryImage image="/img/sardegna/im45.jpg" loading="eager" />
+    <GalleryImage image="/img/sardegna/im29.jpg" loading="eager" />
     <GalleryImage image="/img/sardegna/im42.jpg" />
     <GalleryImage image="/img/sardegna/im17.jpg" />
     <GalleryImage image="/img/sardegna/im27.jpg" />
     <GalleryImage image="/img/sardegna/im36.jpg" />
   </div>
   <div id="Column-Right" class="flex flex-col gap-6">
-    <GalleryImage image="/img/sardegna/im39.jpg" />
-    <GalleryImage image="/img/sardegna/im15.jpg" />
+    <GalleryImage image="/img/sardegna/im39.jpg" loading="eager" />
+    <GalleryImage image="/img/sardegna/im15.jpg" loading="eager" />
     <GalleryImage image="/img/sardegna/im19.jpg" />
     <GalleryImage image="/img/sardegna/im16.jpg" />
     <GalleryImage image="/img/sardegna/im28.jpg" />

diff --git a/src/src/pages/collections/tales.astro b/src/src/pages/collections/tales.astro
@@ -19,8 +19,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
   nextCollectionLink="france"
 >
   <div class="flex flex-col gap-6">
-    <GalleryImage image="/img/rototo/im2.jpg" />
-    <GalleryImage image="/img/rototo/im17.jpg" />
+    <GalleryImage image="/img/rototo/im2.jpg" loading="eager" />
+    <GalleryImage image="/img/rototo/im17.jpg" loading="eager" />
     <GalleryImage image="/img/rototo/im16.jpg" />
     <GalleryImage image="/img/rototo/im14.jpg" />
     <GalleryImage image="/img/rototo/im6.jpg" />
@@ -29,8 +29,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/rototo/im24.jpg" />
   </div>
   <div class="flex flex-col gap-6">
-    <GalleryImage image="/img/rototo/im18.jpg" />
-    <GalleryImage image="/img/rototo/im20.jpg" />
+    <GalleryImage image="/img/rototo/im18.jpg" loading="eager" />
+    <GalleryImage image="/img/rototo/im20.jpg" loading="eager" />
     <GalleryImage image="/img/rototo/im22.jpg" />
     <GalleryImage image="/img/rototo/im23.jpg" />
     <GalleryImage image="/img/rototo/im15.jpg" />
@@ -39,8 +39,8 @@ import GalleryImage from "../../components/GalleryImage.astro";
     <GalleryImage image="/img/rototo/im3.jpg" />
   </div>
   <div class="flex flex-col gap-6">
-    <GalleryImage image="/img/rototo/im1.jpg" />
-    <GalleryImage image="/img/rototo/im19.jpg" />
+    <GalleryImage image="/img/rototo/im1.jpg" loading="eager"/>
+    <GalleryImage image="/img/rototo/im19.jpg" loading="eager"/>
     <GalleryImage image="/img/rototo/im21.jpg" />
     <GalleryImage image="/img/rototo/im13.jpg" />
     <GalleryImage image="/img/rototo/im7.jpg" />