Lazy Load

Erlebe die Zukunft des Webseitenladens: Lazy Load – die revolutionäre Technologie, die deine Seite blitzschnell lädt, ohne dabei kostbare Ressourcen zu verschwenden. Entdecke die Leichtigkeit des Surfens ohne lästige Wartezeiten.

Basis-Code

Wir fangen damit an uns Dateien zu erstellen. Die index.html, scripts.js und styles.css. Die index.html bekommt den Basis-Code und wir binden unsere Dateien mit ein:

// index.html

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lazy Load</title>
<link rel="stylesheet" href="assets/styles.css">
</head>
<body>
  
<script src="assets/scripts.js"></script>
</body>
</html>

Bilder für lazy load

Als nächstes brauchen wir Bilder mit denen wir lazy load nutzen können. Dafür nutze ich https://picsum.photos/

// index.html

<img src="https://picsum.photos/1000/600?random=1" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=2" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=3" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=4" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=5" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=6" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=7" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=8" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=9" class="lazy-load" />
<hr />
<img src="https://picsum.photos/1000/600?random=10" class="lazy-load" />

Stylen

Die Bilder sind random, das heisst bei jedem laden sind es neue Photos. Diese werden wir jetzt ein bisschen stylen.

// assets/styles.css

body {
  display: grid;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  height: 100%;
}

.lazy-load {
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy-load.visible {
  opacity: 1;
}

img {
  max-width: 100%;
  height: auto;
  box-shadow: 5px 5px 50px black;
}

hr {
  margin: 200px auto;
}

Das sollte für den Anfang reichen.

// assets/script.js

const lazyClass = "lazy-load";
const lazyImages = document.querySelectorAll(`.${lazyClass}`);

const lazyObserver = new IntersectionObserver((elements) => {
  elements.forEach((element) => {
    if (element.isIntersecting) {
      const image = element.target;
      showImage(image);
      lazyObserver.unobserve(image);
    }
  });
});

lazyImages.forEach((image) => {
  lazyObserver.observe(image);
});

function showImage(image) {
  image.src = image.dataset.src;
  image.classList.remove(lazyClass);
  image.classList.add("visible");
}

Dieser Code implementiert das Konzept des Lazy Loadings für Bilder auf einer Webseite mithilfe von JavaScript. Hier ist eine Erklärung des Codes:

1. `const lazyClass = "lazy-load";` definiert eine Konstante `lazyClass`, die den Namen der Klasse speichert, die den Bildern zugewiesen wird, die Lazy Loading verwenden sollen. In diesem Fall ist es "lazy-load".

2. `const lazyImages = document.querySelectorAll(`.${lazyClass}`);` verwendet die `document.querySelectorAll`-Methode, um alle Elemente auf der Seite auszuwählen, die die Klasse `lazy-load` haben. Diese Elemente werden in der Variable `lazyImages` gespeichert.

3. `const lazyObserver = new IntersectionObserver((elements) => { ... });` erstellt eine neue Instanz des `IntersectionObserver`, der darauf wartet, dass bestimmte Elemente (in diesem Fall die Bilder) in den sichtbaren Bereich des Browserfensters gelangen.

4. Die Funktion, die an den `IntersectionObserver` übergeben wird, wird jedes Mal aufgerufen, wenn sich der Status eines beobachteten Elements (in diesem Fall eines Bildes) ändert. Es wird überprüft, ob das Element (Bild) im sichtbaren Bereich liegt (`element.isIntersecting`). Wenn dies der Fall ist, wird die Funktion `showImage(image)` aufgerufen, um das Bild zu laden und anzuzeigen. Dann wird das Bild aus der Beobachtung entfernt, um unnötige Abfragen zu vermeiden.

5. `lazyImages.forEach((image) => { lazyObserver.observe(image); });` ruft `observe` für jedes Bild in `lazyImages` auf, um den `IntersectionObserver` für jedes Bild zu aktivieren.

6. `function showImage(image) { ... }` definiert die Funktion `showImage`, die ein Bild entgegennimmt und es anzeigt. Zuerst wird die `src`-Eigenschaft des Bildes auf den Wert von `data-src` gesetzt, um das eigentliche Bild zu laden. Dann wird die Klasse `lazy-load` entfernt, damit das Bild nicht erneut geladen wird.

Zusammenfassend sorgt dieser Code dafür, dass Bilder auf der Seite nur dann geladen werden, wenn sie in den sichtbaren Bereich des Bildschirms gelangen, was die Ladezeit der Seite verbessert und die Benutzererfahrung optimiert. Nicht erschrecken die Bilder sind erstmal nichtmehr zu sehen, wir müssen den image Container noch umschreiben.

data-src

Aus der src müssen wir data-src machen, dann sollte es funktionieren.

// index.html

<img data-src="https://picsum.photos/1000/600?random=1" class="lazy-load" />
<hr />
.
.
.

Meld dich an und schreibe ein Kommentar