🎈 perf: optimize image loading

Author: carlosjorger

public/images/640x360.webp

@@ -15,11 +15,34 @@ const { id, title, description, anchorLabel, githubLink, imageSrc, website } =
 	Astro.props;
 ---
 
-<!-- TODO: optimize image loaging -->
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		var lazyBackgrounds = [].slice.call(
+			document.querySelectorAll('.lazy-background')
+		);
+		if ('IntersectionObserver' in window) {
+			let lazyBackgroundObserver = new IntersectionObserver(
+				(entries, observer) => {
+					entries.forEach((entry) => {
+						if (entry.isIntersecting) {
+							console.log(entry.target);
+							entry.target.classList.add('visibleImg');
+							lazyBackgroundObserver.unobserve(entry.target);
+						}
+					});
+				}
+			);
+
+			lazyBackgrounds.forEach((lazyBackground: HTMLElement) => {
+				lazyBackgroundObserver.observe(lazyBackground);
+			});
+		}
+	});
+</script>
 <article
 	id={id}
 	class:list={[imageSrc]}
-	class="reveal my-2 flex w-full flex-col self-start rounded border-[0.1rem] border-solid border-[var(--default-secundary-font-color)] bg-[#322644] bg-cover bg-center bg-no-repeat font-lato shadow-lg shadow-black"
+	class="reveal bg-placeholder lazy-background my-2 flex w-full flex-col self-start rounded border-[0.1rem] border-solid border-[var(--default-secundary-font-color)] bg-[#322644] bg-cover bg-center bg-no-repeat font-lato shadow-lg shadow-black"
 >
 	<div
 		class="h-72 bg-[#5c497fc5] p-1 backdrop-brightness-[0.2] backdrop-grayscale transition-all duration-300 ease-in-out hover:bg-teal-600/0 hover:backdrop-grayscale-0 max-lg:h-80 max-md:h-64 max-sm:h-52 [&>*:first-child]:hover:scale-110"

src/components/Work/Project.astro

@@ -18,7 +18,7 @@ import Subtitle from '../shared/Subtitle.astro';
 			title="Cuvimaker"
 			anchorLabel="See my online cv maker github project"
 			githubLink="https://github.com/carlosjorger/cuvimaker"
-			imageSrc="bg-cuvimakerExample"
+			imageSrc="[&.visibleImg]:bg-cuvimakerExample"
 			website="https://cuvimaker.netlify.app/"
 		/>
 		<Project
@@ -27,15 +27,15 @@ import Subtitle from '../shared/Subtitle.astro';
 			title="Rusty Copier"
 			anchorLabel="See my rusty copier github project"
 			githubLink="https://github.com/carlosjorger/rustycopier"
-			imageSrc="bg-rustycopier"
+			imageSrc="[&.visibleImg]:bg-rustycopier"
 		/>
 		<Project
 			id="angular-portfolio"
 			description="It is a personal portfolio builded with angular using really cool animation (Angular animations)."
 			title="Angular Portfolio"
 			anchorLabel="See my portfolio github project"
 			githubLink="https://github.com/carlosjorger/portfolio"
-			imageSrc="bg-portfolio"
+			imageSrc="[&.visibleImg]:bg-portfolio"
 			website="https://carlosjorger.github.io/portfolio/"
 		/>
 	</div>

src/components/Work/Work.astro

@@ -7,6 +7,7 @@ module.exports = {
 				portfolio: "url('/images/Portfolio.webp')",
 				rustycopier: "url('/images/Rustycopier.webp')",
 				cuvimakerExample: "url('/images/Cuvimaker-example.webp')",
+				placeholder: "url('/images/640x360.webp')",
 			},
 		},
 		fontFamily: {