Lazy Loading w JavaScript
Lazy Loading to technika optymalizacji wydajności stron internetowych, która polega na ładowaniu zasobów (np. obrazów, skryptów, komentarzy) dopiero wtedy, gdy są one potrzebne. Dzięki temu zmniejsza się początkowy czas ładowania strony, a także zużycie zasobów sieciowych i pamięci.
Zalety Lazy Loading
- Poprawa wydajności - Skrócenie czasu początkowego ładowania strony.
- Oszczędność zasobów - Wczytywane są tylko te dane, które są faktycznie potrzebne użytkownikowi.
- Lepsze doświadczenie użytkownika - Użytkownik szybciej widzi pierwszą zawartość strony.
- Mniejsze zużycie transferu danych - Przydatne szczególnie na urządzeniach mobilnych.
- Optymalizacja dla SEO - Dobrze zaimplementowany lazy loading nie wpływa negatywnie na indeksowanie treści przez wyszukiwarki.
Wady Lazy Loading
- Złożoność implementacji - Wymaga dodatkowej logiki i obsługi błędów.
- Opóźnienie w wyświetlaniu treści - Może powodować chwilowe "puste" miejsca w trakcie przewijania.
- Problemy z SEO - Jeśli nie jest prawidłowo zaimplementowany, może utrudnić indeksowanie dynamicznie ładowanych treści.
Implementacja Lazy Loading dla komentarzy pod postem
Poniżej znajduje się kod JavaScript implementujący dynamiczne wczytywanie komentarzy podczas przewijania strony:
HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Komentarzy</title>
<style>
#comments {
max-width: 600px;
margin: 20px auto;
}
.comment {
padding: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="comments">
<h2>Komentarze</h2>
<div id="comment-list"></div>
<div id="loading" style="display: none; text-align: center;">Ładowanie...</div>
</div>
<script src="script.js"></script>
</body>
</html>JavaScript (script.js)
let page = 1;
const commentsContainer = document.getElementById("comment-list");
const loadingIndicator = document.getElementById("loading");
async function loadComments() {
loadingIndicator.style.display = "block";
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/comments?_limit=5&_page=${page}`);
const comments = await response.json();
if (comments.length === 0) {
window.removeEventListener("scroll", handleScroll);
loadingIndicator.style.display = "none";
return;
}
comments.forEach(comment => {
const commentElement = document.createElement("div");
commentElement.classList.add("comment");
commentElement.innerHTML = `<strong>${comment.name}</strong><p>${comment.body}</p>`;
commentsContainer.appendChild(commentElement);
});
page++;
} catch (error) {
console.error("Błąd ładowania komentarzy", error);
} finally {
loadingIndicator.style.display = "none";
}
}
function handleScroll() {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 50) {
loadComments();
}
}
window.addEventListener("scroll", handleScroll);
loadComments();Jak działa kod?
- Na początku wczytywane jest 5 pierwszych komentarzy.
- Gdy użytkownik przewinie stronę na dół, wywoływana jest funkcja
loadComments, która pobiera kolejne komentarze z API. - Jeśli nie ma już więcej komentarzy do załadowania, skrypt przestaje nasłuchiwać zdarzenia przewijania.
Podsumowanie
Lazy Loading to skuteczna metoda poprawy wydajności stron internetowych poprzez dynamiczne ładowanie zasobów. W powyższym przykładzie zastosowano ją do komentarzy pod postem, co pozwala na płynne i zoptymalizowane wczytywanie treści. Kluczowe jest jednak odpowiednie zarządzanie błędami i zapewnienie dobrego doświadczenia użytkownika.
27 lutego 2025
15