Optimize image loading methods

project-emory · Dec 6, 2024 · 2c10e5b · 2c10e5b
1 parent b5d2a2b
commit 2c10e5b
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 3 deletions.
diff --git a/src/app/sections/0-landing/graphics.jsx b/src/app/sections/0-landing/graphics.jsx
@@ -38,6 +38,7 @@ const Graphics = () => {
           id="landing-bg"
           src={bg}
           alt="bg"
+          loading="eager"
           className="absolute z-0 w-screen"
         />
       </motion.div>
@@ -46,14 +47,15 @@ const Graphics = () => {
       {distant.map((item, index) => (
         <Parallax containerRef={container} speed={"sm"} key={index}>
           <motion.div
+            key={index}
             initial={{ opacity: 0, y: 100 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1.5, delay: 0.3, ease: "easeOut" }}
           >
             <Image
-              key={index}
               src={item}
               alt={"img"}
+              loading="eager"
               className="w-screen"
             />
           </motion.div>
@@ -70,6 +72,7 @@ const Graphics = () => {
           <Image
             src={cloud_r}
             alt={"img"}
+            loading="eager"
             className="w-screen"
           />
         </motion.div>
@@ -85,6 +88,7 @@ const Graphics = () => {
           <Image
             src={cloud_bl}
             alt={"img"}
+            loading="eager"
             className="w-screen"
           />
         </motion.div>
@@ -93,14 +97,15 @@ const Graphics = () => {
       {medium.map((item, index) => (
         <Parallax containerRef={container} speed={"md"} key={index}>
           <motion.div
+            key={index}
             initial={{ opacity: 0, y: 120 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 0.6, ease: "easeOut" }}
           >
             <Image
-              key={index}
               src={item}
               alt={"img"}
+              loading="eager"
               className="w-screen"
             />
           </motion.div>
@@ -183,12 +188,12 @@ const Graphics = () => {
       {close.map((item, index) => (
         <Parallax containerRef={container} speed={"lg"} key={index}>
           <motion.div
+            key={index}
             initial={{ opacity: 0, y: 150 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 1, delay: 1, ease: "easeOut" }}
           >
             <Image
-              key={index}
               src={item}
               alt={"img"}
               className="w-screen"

diff --git a/src/app/sections/1-about/graphics.jsx b/src/app/sections/1-about/graphics.jsx
@@ -36,6 +36,7 @@ const Graphics = () => {
           id="about-bg"
           src={bg}
           alt="bg"
+          loading="eager"
           className="absolute z-0 w-screen"
         />
       </motion.div>

diff --git a/src/app/sections/2-tracks/graphics.jsx b/src/app/sections/2-tracks/graphics.jsx
@@ -35,6 +35,7 @@ const Graphics = () => {
         id="tracks-bg"
         src={bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
 

diff --git a/src/app/sections/3-schedule/graphics.jsx b/src/app/sections/3-schedule/graphics.jsx
@@ -34,6 +34,7 @@ const Graphics = () => {
         id="schedule-bg"
         src={bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
 

diff --git a/src/app/sections/4-speakers/graphics.jsx b/src/app/sections/4-speakers/graphics.jsx
@@ -11,6 +11,7 @@ const Graphics = () => {
         id="speakers-bg"
         src={general_bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
     </div>

diff --git a/src/app/sections/5-faq/graphics.jsx b/src/app/sections/5-faq/graphics.jsx
@@ -20,6 +20,7 @@ const Graphics = () => {
         id="speakers-bg"
         src={general_bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
     </div>

diff --git a/src/app/sections/6-sponsors/graphics.jsx b/src/app/sections/6-sponsors/graphics.jsx
@@ -11,6 +11,7 @@ const Graphics = () => {
         id="speakers-bg"
         src={general_bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />
     </div>

diff --git a/src/app/sections/7-footer/graphics.jsx b/src/app/sections/7-footer/graphics.jsx
@@ -19,6 +19,7 @@ const Graphics = () => {
         id="footer-bg"
         src={bg}
         alt="bg"
+        loading="eager"
         className="absolute z-0 w-screen"
       />