Deutsch
Deutsch
Lazy Loading ist eine Technologie zur Optimierung der Webseitenleistung, die die Geschwindigkeit des Website-Zugriffs verbessert, den Bandbreitenverbrauch reduziert und das Benutzererlebnis verbessert, indem das Laden nicht kritischer Ressourcen verzögert wird. Bei der Entwicklung von PHP-Websites wird Lazy Loading normalerweise zum Lazy Loading von Bildern, Audio- und Videoressourcen sowie anderen großen Dateiressourcen verwendet.
In diesem Artikel wird anhand von Beispielen veranschaulicht, wie Lazy Loading in PHP-Websites implementiert wird, um die Geschwindigkeit des Website-Zugriffs zu verbessern.
Die Implementierung von Lazy Loading basiert normalerweise auf Plug-In-Bibliotheken von Drittanbietern wie Lazy Load, Unveil.js usw. Diese Bibliotheken können zur einfachen und schnellen Verwendung über npm oder CDN importiert werden.
Im Folgenden finden Sie einen Beispielcode für die Verwendung des Lazy Load-Plug-Ins zum Implementieren des verzögerten Ladens von Bildern:
<!-- existieren<head>Im Tag eingeführtLazy LoadPlugin -Bibliothek -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>
<!-- existieren图片标签Mitte添加data-srcEigentum，Geben Sie die echte Bildadresse eindata-srcMitte，Gleichzeitig hinzugefügtlazyArt -->
<img class="lazy" data-src="path/to/your/image.jpg" alt="Beispielbild" />
<!-- InitialisierungLazy LoadPlugin -->
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove("lazy");
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
</script>Durch die obige Methode wird das echte Bild nur dann geladen, wenn das Bild in das Benutzerfenster gelangt, wodurch die anfängliche Ladezeit der Seite verkürzt wird.
Lazy Loading gilt nicht nur für Bilder, sondern auch für Audio- und Videoressourcen. Durch die Überwachung des Seiten-Scroll-Ereignisses wird ermittelt, ob sich das Element im Fensterbereich befindet, und Audio- und Videoinhalte werden dynamisch geladen und abgespielt.
Das Folgende ist ein Beispiel für das verzögerte Laden von Videos:
<video controls muted loop autoplay preload="none" id="lazy-video" data-src="path/to/your/video.mp4"></video>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyVideo = document.getElementById("lazy-video");
window.addEventListener("scroll", function() {
var rect = lazyVideo.getBoundingClientRect();
var inViewPort = (rect.top >= 0 && rect.bottom <= window.innerHeight);
if (inViewPort) {
lazyVideo.src = lazyVideo.dataset.src;
}
});
});
</script>Im Beispiel verwendet das Video-Tag preload="none", um das automatische Laden von Ressourcen zu vermeiden. Wenn der Benutzer durch die Seite scrollt und das Video in das Fenster gelangt, wird das Video geladen und abgespielt, wodurch der anfängliche Ladedruck der Seite effektiv verringert wird.
Durch die Lazy-Loading-Technologie kann die Menge der anfänglich auf einer PHP-Website geladenen Ressourcen erheblich reduziert werden, wodurch die Zugriffsgeschwindigkeit verbessert und das Benutzererlebnis optimiert wird. Das Beispiel in diesem Artikel zeigt, wie das verzögerte Laden von Bildern, Audio und Video implementiert wird, das Entwickler je nach Website-Anforderungen flexibel anwenden können, um die Website-Leistung weiter zu verbessern.
