Jinsi ya Kutumia Intersection Observer API kwa Lazy Loading

Intersection Observer API inakusaidia kupakia picha au content pale tu zinapoonekana kwenye screen. Hii inapunguza load time ya website na kuboresha performance.

Faida za Lazy Loading

Inaboresha speed ya website

Inapunguza matumizi ya data

Inaongeza SEO na user experience

✅ Step 1: HTML Structure
<img class="lazy" data-src="image1.jpg" alt="Lazy Image">
<img class="lazy" data-src="image2.jpg" alt="Lazy Image">
<img class="lazy" data-src="image3.jpg" alt="Lazy Image">


👉 Tunatumia data-src badala ya src ili picha zisitumike hadi zionekane.

✅ Step 2: CSS (Optional Placeholder)
.lazy {
width: 100%;
height: 260px;
background: #f0f0f0;
object-fit: cover;
}

✅ Step 3: JavaScript Intersection Observer
// Select all lazy images
const images = document.querySelectorAll(".lazy");

const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // real image
img.classList.remove("lazy");
obs.unobserve(img);
}
});
}, {
threshold: 0.1
});

images.forEach(img => observer.observe(img));


✔️ Code inafanya kazi bila library yoyote
✔️ Inapakia picha tu zinapoonekana

🔗 Kwa Kujifunza Zaidi

🌐 Faulink – Namba 1 Tanzania kwa Web Design & Systems
https://www.faulink.com/