diff --git a/package.json b/package.json
index 110fd994d07afedb5a657cde888942d5b9734019..fbaef5f6ed9f309775905a31b8e6c58c8853dbb9 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-intersection-observer": "^8.32.0",
+ "react-lazyload": "^3.2.0",
"react-scripts": "4.0.3",
"sass": "^1.35.1",
"web-vitals": "^1.0.1"
diff --git a/src/js/components/LazyLoadedImage/LazyLoadedImage.js b/src/js/components/LazyLoadedImage/LazyLoadedImage.js
new file mode 100644
index 0000000000000000000000000000000000000000..39669aa695930a829b33a50d1de6b6d9cf624033
--- /dev/null
+++ b/src/js/components/LazyLoadedImage/LazyLoadedImage.js
@@ -0,0 +1,19 @@
+import React from "react";
+import LazyLoad from 'react-lazyload';
+
+const defaultParams = {
+ height: window.innerHeight,
+ once: true,
+ offset: window.innerHeight * 3
+};
+
+const LazyLoadedImage = (props) => {
+ const {src, alt} = props;
+ return (
+ <LazyLoad height={defaultParams.height} offset={defaultParams.offset} once={defaultParams.once}>
+ <img src={src} alt={alt} className={props.className}/>
+ </LazyLoad>
+ );
+}
+
+export default LazyLoadedImage;
diff --git a/src/js/sections/CloudSection/CloudSection.js b/src/js/sections/CloudSection/CloudSection.js
index 8dd0f8256f07ef0d061dcaaf7236d17e45fe11cb..37c26f30917f15f0e42cc92dc82128aec435e757 100644
--- a/src/js/sections/CloudSection/CloudSection.js
+++ b/src/js/sections/CloudSection/CloudSection.js
@@ -5,6 +5,7 @@ import cloud from "../../../assets/main/nuage_icones_s.png";
import cloudMobile from "../../../assets/main/nuage_icones_sm.png";
import {primaryBlack, primaryBlue, white} from "../../../style/colors.module.scss";
+import LazyLoadedImage from "../../components/LazyLoadedImage/LazyLoadedImage";
const upperBlockContent = [
{text: "Le langage n'a pas d'importance, ", color: primaryBlue},
@@ -26,7 +27,7 @@ const CloudSection = ({innerRef}) => {
</div>
<picture>
<source media={"(max-width : 425px)"} srcSet={cloudMobile}/>
- <img src={cloud} alt="octopus" className={styles.Cloud}/>
+ <LazyLoadedImage src={cloud} alt="octopus" className={styles.Cloud}/>
</picture>
<div className={styles.BottomBlock}>
<MultiColoredText content={bottomBlockTitle} />
diff --git a/src/js/sections/LandingSection/LandingSection.js b/src/js/sections/LandingSection/LandingSection.js
index 8a29f0f4ee364d0cbd11d70408e6a4a07a7f3c3c..a912bd101192e00782d90857072ca21cab89ed9b 100644
--- a/src/js/sections/LandingSection/LandingSection.js
+++ b/src/js/sections/LandingSection/LandingSection.js
@@ -5,6 +5,7 @@ import octopus from '../../../assets/props/pieuvre.svg'
import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
import {primaryBlack, primaryPink} from "../../../style/colors.module.scss";
+import LazyLoadedImage from '../../components/LazyLoadedImage/LazyLoadedImage';
const landingPageMessage = [
{text: "Votre outil pour ", color: primaryBlack},
@@ -16,7 +17,7 @@ const LandingSection = ({innerRef}) => {
return (
<div ref={innerRef} id={"LandingSection"} className={styles.LandingSection}>
<div className={styles.LeftSide}>
- <img src={octopus} alt={"octopus"} className={styles.Octopus}/>
+ <LazyLoadedImage src={octopus} alt={"octopus"} className={styles.Octopus}/>
</div>
<div className={styles.RightSide}>
<div className={styles.Title}>DEADLOCK <br/>
diff --git a/src/js/sections/OctopusSection/OctopusSection.js b/src/js/sections/OctopusSection/OctopusSection.js
index f219d273a35f535a5512c6c3bad01cddabacd018..38b2db5b30262b1d9c60a0bf8148153c2c43f407 100644
--- a/src/js/sections/OctopusSection/OctopusSection.js
+++ b/src/js/sections/OctopusSection/OctopusSection.js
@@ -2,6 +2,7 @@ import styles from "./OctopusSection.module.scss";
import octopusImageBig from "../../../assets/main/poulpe_ludique_big_s.png";
import octopusImageMobile from "../../../assets/main/poulpe_ludique_version_mobile_s.png";
+import LazyLoadedImage from "../../components/LazyLoadedImage/LazyLoadedImage";
const OctopusSection = ({innerRef}) => {
@@ -9,7 +10,7 @@ const OctopusSection = ({innerRef}) => {
<div ref={innerRef} id={"OctopusSection"} className={styles.OctopusSection}>
<picture>
<source media={"(max-width : 768px)"} srcSet={octopusImageMobile}/>
- <img src={octopusImageBig} alt="octopus" className={styles.OctopusImage}/>
+ <LazyLoadedImage src={octopusImageBig} alt="octopus" className={styles.OctopusImage}/>
</picture>
</div>
);
diff --git a/src/js/sections/StatsSection/StatsSection.js b/src/js/sections/StatsSection/StatsSection.js
index a021081721218641db32dfab0da4a8a0cc7ede9e..f1ae4685fcdeb3072f2cac663d8c76ac24af4dcf 100644
--- a/src/js/sections/StatsSection/StatsSection.js
+++ b/src/js/sections/StatsSection/StatsSection.js
@@ -6,6 +6,7 @@ import statsImageMobile from "../../../assets/main/notes_mobile.png";
import {primaryBlack, white} from "../../../style/colors.module.scss";
+import LazyLoadedImage from "../../components/LazyLoadedImage/LazyLoadedImage";
@@ -28,7 +29,7 @@ const StatsSection = ({innerRef}) => {
<div className={styles.RightSide}>
<picture>
<source media={"(max-width : 768px)"} srcSet={statsImageMobile}/>
- <img src={statsImage} alt="octopus" className={styles.NotesImage}/>
+ <LazyLoadedImage src={statsImage} alt="octopus" className={styles.NotesImage}/>
</picture>
</div>
</div>
diff --git a/src/js/sections/TowerSection/TowerSection.js b/src/js/sections/TowerSection/TowerSection.js
index c14b83f4024af0f9df7088dbf297c7a3638b3d4f..e5d696fb67eecffee94af0c36cea75a03e992a36 100644
--- a/src/js/sections/TowerSection/TowerSection.js
+++ b/src/js/sections/TowerSection/TowerSection.js
@@ -5,6 +5,9 @@ import towerImage from "../../../assets/props/donjon.svg";
import {primaryBlack, white} from "../../../style/colors.module.scss";
+import LazyLoadedImage from "../../components/LazyLoadedImage/LazyLoadedImage";
+
+
const title = [
{text: "Nous pensons qu'", color: white},
@@ -19,7 +22,7 @@ const TowerSection = ({innerRef}) => {
return (
<div ref={innerRef} id={"TowerSection"} className={styles.TowerSection}>
<div className={styles.LeftSide}>
- <img src={towerImage} alt={"tower"} className={styles.TowerImage}/>
+ <LazyLoadedImage src={towerImage} alt={"tower"} className={styles.TowerImage}/>
</div>
<div className={styles.RightSide}>
<div className={styles.Title}>
diff --git a/src/js/sections/VscodeSection/VscodeSection.js b/src/js/sections/VscodeSection/VscodeSection.js
index e383812dc340b5931aa20ab0363432b6108aca78..66822bd50bb55904d14b92522d241365f9dc6ed2 100644
--- a/src/js/sections/VscodeSection/VscodeSection.js
+++ b/src/js/sections/VscodeSection/VscodeSection.js
@@ -5,6 +5,7 @@ import vscodeImage from "../../../assets/main/vscode_screen.png";
import vscodeImageMobile from "../../../assets/main/vscode_mobile2.png"
import {primaryBlack, white} from "../../../style/colors.module.scss";
+import LazyLoadedImage from "../../components/LazyLoadedImage/LazyLoadedImage";
@@ -20,7 +21,7 @@ const VscodeSection = ({innerRef}) => {
<div className={styles.LeftSide}>
<picture>
<source media={"(max-width : 425px)"} srcSet={vscodeImageMobile}/>
- <img src={vscodeImage} alt="octopus" className={styles.VscodeImage}/>
+ <LazyLoadedImage src={vscodeImage} alt="octopus" className={styles.VscodeImage}/>
</picture>
</div>
<div className={styles.RightSide}>
diff --git a/yarn.lock b/yarn.lock
index 1f50be447e051bcbf8450f4c676a6b2b1efd4ba0..d78fdc6a5673c9c2a609c5bcf92d5eb47953e29c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9774,6 +9774,11 @@ react-is@^17.0.1:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
+react-lazyload@^3.2.0:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/react-lazyload/-/react-lazyload-3.2.0.tgz#497bd06a6dbd7015e3376e1137a67dc47d2dd021"
+ integrity sha512-zJlrG8QyVZz4+xkYZH5v1w3YaP5wEFaYSUWC4CT9UXfK75IfRAIEdnyIUF+dXr3kX2MOtL1lUaZmaQZqrETwgw==
+
react-refresh@^0.8.3:
version "0.8.3"
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"