implement lazy loading for images on learn page

layer5io · Sep 8, 2024 · cf34d61 · cf34d61
1 parent 19706eb
commit cf34d61
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/sections/Learn/LearnPage-Sections/books.js b/src/sections/Learn/LearnPage-Sections/books.js
@@ -136,7 +136,7 @@ const BooksSection = () => {
             <div className="books-card" key={id}>
               <Link className="books-page_link" to={fields.slug} >
                 <div className="books-image">
-                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
+                  <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} loading="lazy" />
                 </div>
                 <div className="books-details">
                   <h2>{frontmatter.title}</h2>

diff --git a/src/sections/Learn/LearnPage-Sections/learn.js b/src/sections/Learn/LearnPage-Sections/learn.js
@@ -180,7 +180,7 @@ const LearnSection = () => {
   return (
     <LearnSectionWrapper>
       <div className="learn-particle-img">
-        <img src={Meshery_Logo} alt="Meshery Logo"/>
+        <img src={Meshery_Logo} alt="Meshery Logo" loading="lazy" />
       </div>
       <div>
         <h1 className="learn-heading"><span>Meshery - </span> Learn how to manage Kubernetes</h1>
@@ -196,7 +196,7 @@ const LearnSection = () => {
                 <Button secondary title="Managing the performance of your microservices"/>
               </Link>
             </Col>
-            <img src={OReillyLogo} alt="OReilly Logo"/>
+            <img src={OReillyLogo} alt="OReilly Logo" loading="lazy" />
           </Row>
         </Container>
         <div className="learn-cards-section">

diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -254,7 +254,7 @@ const WorkshopsSection = () => {
               <Col xs={12} sm={6} xl={4} className="workshops-card" key={index}>
                 <Link to={fields.slug} >
                   <div className="workshop-thumbnails">
-                    <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />
+                    <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} loading="lazy" />
                   </div>
                 </Link>
               </Col>
@@ -268,7 +268,7 @@ const WorkshopsSection = () => {
             feedbackData.map((data, index) => {
               return (
                 <Col key={index} className="feedbackCol">
-                  <img className="blockquoteImg" src={BlockQouteImage} alt="Quote-Image" />
+                  <img className="blockquoteImg" src={BlockQouteImage} alt="Quote-Image" loading="lazy" />
                   <p>{data.feedback}</p>
                   <h3>{data.workshop}</h3>
                   <h5>{data.studnt_name}</h5>