Français
Français
Lazy Loading est une technologie d'optimisation des performances Web qui peut améliorer la vitesse d'accès au site Web, réduire la consommation de bande passante et améliorer l'expérience utilisateur en retardant le chargement des ressources non critiques. Dans le développement du site Web PHP, le chargement paresseux est généralement utilisé pour un chargement retardé des images, de l'audio et de la vidéo et d'autres ressources de fichiers importantes.
Cet article utilisera des exemples pour illustrer comment implémenter le chargement paresseux dans les sites Web PHP pour améliorer la vitesse d'accès au site Web.
La mise en œuvre du chargement paresseux dépend généralement des bibliothèques de plug-in tierces, telles que la charge paresseuse, devveil.js, etc. Ces bibliothèques peuvent être introduites via NPM ou CDN pour une utilisation rapide et rapide.
Voici l'exemple de code pour implémenter le chargement d'image paresseux à l'aide du plugin de chargement paresseux:
<!-- exister<head>Introduit dans la baliseLazy LoadBibliothèque de plugin -->
<script src="https://cdn.jsdelivr.net/npm/lazyload/lazyload.js"></script>
<!-- exister图片标签milieu添加data-srcpropriété，Mettez la véritable adresse d'image dansdata-srcmilieu，Ajouté en même tempslazygentil -->
<img class="lazy" data-src="path/to/your/image.jpg" alt="Exemple d'image" />
<!-- initialisationLazy 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>Grâce à la méthode ci-dessus, l'image réelle ne sera chargée que lorsque l'image entre dans la fenêtre utilisateur, réduisant ainsi le temps de chargement initial de la page.
Le chargement paresseux convient non seulement aux images, mais aussi aux ressources audio et vidéo. En surveillant les événements de défilement de la page, déterminez si l'élément se trouve dans la plage de fenêtres et chargez et lisez dynamiquement le contenu audio et vidéo.
Voici un exemple de chargement vidéo paresseux:
<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>Dans l'exemple, la balise vidéo utilise Preload = "None" pour éviter de charger automatiquement les ressources. Lorsque l'utilisateur fait défiler la page et que la vidéo entre dans la fenêtre, la vidéo commencera à le charger et à la lire, réduisant efficacement la pression de chargement initiale de la page.
La technologie de chargement paresseuse peut réduire considérablement la quantité de ressources initialement chargées par les sites Web PHP, augmentant ainsi la vitesse d'accès et optimisant l'expérience utilisateur. Cet exemple d'article montre la méthode de chargement paresseuse des images et de l'audio et de la vidéo. Les développeurs peuvent l'appliquer de manière flexible en fonction du site Web doivent améliorer encore les performances du site Web.
