diff --git a/src/Components/Borhomthuri/Borhomthuri.jsx b/src/Components/Borhomthuri/Borhomthuri.jsx index bce6a66..d99adfe 100644 --- a/src/Components/Borhomthuri/Borhomthuri.jsx +++ b/src/Components/Borhomthuri/Borhomthuri.jsx @@ -1,25 +1,64 @@ +/* eslint-disable func-names */ +/* eslint-disable no-param-reassign */ +/* eslint-disable prefer-arrow-callback */ + +import { useState, useEffect } from "react"; import styles from "./Borhomthuri.module.scss"; -// import Film from "./Filmy"; -// import Card from "./Card"; import data from "../../assets/Edition.json"; import LottieHeading from "../LottieHeading/LottieHeading"; -// import ScrolBar from "./ScrolBar"; -// import FrontCover from "./FrontCover"; + const Borhomthuri = () => { + /* implementing lazy load via ioa */ + const config = { + rootMargin: "0px 0px 0px 0px", + threshold: 0.2, + }; + + const [loaded, setIsLoaded] = useState(false); + useEffect(() => { + const observer = new window.IntersectionObserver(function (entries, self) { + entries.forEach((entry) => { + if (entry.isIntersecting) { + loadImages(entry.target); + self.unobserve(entry.target); + } + }); + }, config); + const imgs = document.querySelectorAll("[data-src]"); + imgs.forEach((img) => { + observer.observe(img); + }); + return () => { + imgs.forEach((img) => { + observer.unobserve(img); + }); + }; + }); + + const loadImages = (image) => { + image.src = image.dataset.src; + }; + return (
{/* */}
setIsLoaded(true)} alt="" />
setIsLoaded(true)} alt="" />
@@ -46,9 +85,18 @@ const Borhomthuri = () => { target="_blank" style={{ margin: "1.2rem" }} > - magazine setIsLoaded(true)} + alt="magazine" + /> + setIsLoaded(true)} alt="Edition" style={{ margin: "0 auto", @@ -64,13 +112,19 @@ const Borhomthuri = () => {
Camera setIsLoaded(true)} />
setIsLoaded(true)} alt="" />
@@ -95,9 +149,18 @@ const Borhomthuri = () => { target="_blank" style={{ margin: "1.2rem" }} > - magazine setIsLoaded(true)} + alt="magazine" + /> + setIsLoaded(true)} alt="Edition" style={{ margin: "0 auto", @@ -107,19 +170,6 @@ const Borhomthuri = () => { ))}
- {/* */} - {/*
- { - data.map((item)=>( - - )) - } -
*/} - - {/*
- -
*/} - {/* Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ratione, perspiciatis vitae sit asperiores quia sunt quasi maxime. Nihil, officia qui fuga reprehenderit obcaecati ipsam alias vel hic laudantium pariatur aliquam mollitia reiciendis explicabo? */}
diff --git a/src/Components/Shared/Footer/Footer.jsx b/src/Components/Shared/Footer/Footer.jsx index b35208e..2a53fcb 100644 --- a/src/Components/Shared/Footer/Footer.jsx +++ b/src/Components/Shared/Footer/Footer.jsx @@ -1,15 +1,52 @@ -import React from "react"; +/* eslint-disable func-names */ +/* eslint-disable no-param-reassign */ +/* eslint-disable prefer-arrow-callback */ + +import { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import styles from "./Footer.module.scss"; import fontStyles from "./fontStyles.module.scss"; // Import font styles const Footer = () => { + /* implementing lazy load via ioa */ + const config = { + rootMargin: "0px 0px 0px 0px", + threshold: 0.2, + }; + + const [loaded, setIsLoaded] = useState(false); + useEffect(() => { + const observer = new window.IntersectionObserver(function (entries, self) { + entries.forEach((entry) => { + if (entry.isIntersecting) { + loadImages(entry.target); + self.unobserve(entry.target); + } + }); + }, config); + const imgs = document.querySelectorAll("[data-src]"); + imgs.forEach((img) => { + observer.observe(img); + }); + return () => { + imgs.forEach((img) => { + observer.unobserve(img); + }); + }; + }); + + const loadImages = (image) => { + image.src = image.dataset.src; + }; return (