lazy loading added to improve performance

airqo-platform · Feb 16, 2024 · b9b464e · b9b464e
1 parent 2b1ee83
commit b9b464e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/website/frontend/src/components/CleanAir/Sections/IntroSection.js b/website/frontend/src/components/CleanAir/Sections/IntroSection.js
@@ -18,6 +18,7 @@ const IntroSection = ({ subtext1, subtext2, image, imagePosition }) => (
           style={{
             top: imagePosition
           }}
+          loading="lazy"
         />
       </div>
       <div className="partners-intro">

diff --git a/website/frontend/src/components/CleanAir/Sections/RegisterSection.js b/website/frontend/src/components/CleanAir/Sections/RegisterSection.js
@@ -12,7 +12,7 @@ const RegisterSection = ({ link }) => {
   return (
     <div className="partners">
       <div className="banner">
-        <img className="banner-image" src={Team} alt="Team" />
+        <img className="banner-image" src={Team} alt="Team" loading="lazy" />
         <div className="banner-content">
           <p>
             <Trans i18nKey="cleanAirSite.membership.individualSection.subText" />

diff --git a/website/frontend/src/components/CleanAir/Sections/SplitSection.js b/website/frontend/src/components/CleanAir/Sections/SplitSection.js
@@ -57,7 +57,7 @@ const SplitSection = ({
             ))}
         </div>
         <div className="splitSection-image">
-          <img className="splitSection-img" src={imgURL} style={imageStyle} alt="" />
+          <img className="splitSection-img" src={imgURL} style={imageStyle} alt="" loading="lazy" />
         </div>
       </div>
     </div>

diff --git a/website/frontend/src/components/CleanAir/Sections/Split_Text_section.js b/website/frontend/src/components/CleanAir/Sections/Split_Text_section.js
@@ -64,7 +64,12 @@ const Split_Text_section = ({ bgColor, content, title, lists, loading }) => {
                 <div className="grid-container">
                   {currentItems.map((item) => (
                     <div className="cell" key={item.id} onClick={onLogoClick(item)}>
-                      <img className="logo" src={item.partner_logo} alt={item.partner_name} />
+                      <img
+                        className="logo"
+                        src={item.partner_logo}
+                        alt={item.partner_name}
+                        loading="lazy"
+                      />
                     </div>
                   ))}
                 </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,7 +57,7 @@ const SplitSection = ({ @@
                 ))}
             </div>
             <div className="splitSection-image">
-              <img className="splitSection-img" src={imgURL} style={imageStyle} alt="" />
+              <img className="splitSection-img" src={imgURL} style={imageStyle} alt="" loading="lazy" />
             </div>
           </div>
         </div>
@@ Expand Down @@