Comment implémenter le chargement paresseux d'images en JavaScript ?

Comment implémenter le chargement paresseux d'images en JavaScript ?

Avec le développement de l'Internet mobile, le nombre d'images sur les pages Web augmente, ce qui ralentit la vitesse de chargement des pages et dégrade l'expérience utilisateur. Afin de résoudre ce problème, la fonction de chargement différé d’image a vu le jour. Le chargement paresseux des images signifie que lorsque l'utilisateur fait défiler jusqu'à la position de l'image, l'image est à nouveau chargée pour améliorer la vitesse de chargement de la page Web. Cet article explique comment utiliser JavaScript pour implémenter le chargement différé d'images et fournit des exemples de code spécifiques.

1. Tout d'abord, nous devons marquer un attribut spécifique pour que l'image soit chargée paresseusement. Dans cet exemple, nous utilisons "data-src" comme attribut de balise et stockons l'adresse réelle de l'image dans cet attribut.

<img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Load Image">

2. Ensuite, nous devons écouter l'événement de défilement de page via JavaScript et déterminer si l'image entre dans la zone visible.

function lazyLoadImages() {
    var lazyImages = document.querySelectorAll('img[data-src]');
    
    lazyImages.forEach(function(img) {
        if(isElementInViewport(img)) {
            img.src = img.getAttribute('data-src');
            img.removeAttribute('data-src');
        }
    });
}

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= window.innerHeight &&
        rect.right <= window.innerWidth
    );
}

window.addEventListener('scroll', lazyLoadImages);
window.addEventListener('resize', lazyLoadImages);

3. Lorsque le navigateur fait défiler ou redimensionne la fenêtre, les événements scroll et resize seront déclenchés. Nous pouvons appeler lazyLoadImages< dans ces deux événements. Fonction /code> pour déterminer et charger les images. <code>scroll 和 resize 事件，我们可以在这两个事件中调用 lazyLoadImages 函数来判断并加载图片。
4. 最后，在页面加载完成后立即执行一次 lazyLoadImages
Enfin, exécutez la fonction lazyLoadImages une fois immédiatement après le chargement de la page pour charger les images dans la zone visible du premier écran.

window.addEventListener('load', lazyLoadImages);

Grâce aux quatre étapes ci-dessus, nous pouvons implémenter la fonction de chargement paresseux des images. Lorsque l'utilisateur fait défiler jusqu'à la position de l'image, l'image se charge automatiquement, améliorant ainsi la vitesse de chargement de la page.

Résumé :

Le chargement paresseux des images stocke l'adresse réelle de l'image dans un attribut spécifique, écoute les événements de défilement de page et de redimensionnement de fenêtre pour déterminer si l'image entre dans la zone visible et charge l'image en fonction du résultat du jugement. Cette technologie est particulièrement importante sur les appareils mobiles et dans les environnements où les performances du réseau sont médiocres pour améliorer l'expérience utilisateur et réduire la charge du serveur.

Ce qui précède est une introduction à la façon dont JavaScript implémente la fonction de chargement paresseux des images et fournit des exemples de code correspondants. J'espère que cela aide! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!