Explication détaillée du chargement paresseux de jQuery lazyload

Lazy Load est un plug-in jQuery écrit en JavaScript. Il peut retarder le chargement des images dans de longues pages. Les images en dehors de la zone visible du navigateur ne seront pas chargées tant que l'utilisateur n'a pas fait défiler la page jusqu'à l'endroit où elles se trouvent. à l'opposé de la façon dont le préchargement des images est géré.

Le chargement paresseux d'images sur de longues pages contenant de nombreuses images volumineuses peut accélérer le chargement des pages. Dans certains cas, le navigateur passe à l'état prêt. peut également aider à réduire la charge sur le serveur. Traitement de rétrogradation

Défilement horizontal

Défilement horizontal dans le conteneur

Défilement vertical dans le conteneur

Il existe beaucoup d'images dans la page

Après cinq Charger les images après un délai de secondes

Utiliser AJAX pour charger les images

Comment utiliser

Lazy Load s'appuie sur jQuery. Veuillez ajouter le code suivant à la fin du HTML, c'est-à-dire < ;/body> Avant :

Vous devez modifier la balise de l'image. L'adresse de l'image doit être placée sur l'attribut data-original. Donnez aux images à chargement paresseux une classe spécifique (par exemple : paresseux). De cette façon, vous pouvez facilement regrouper des plugins d’images. Le code est le suivant :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lazyload.js"></script>

Cela entraînera le chargement retardé de toutes les images avec la classe paresseuse

<img class="lazy" alt="" width="640" height="480" data-original="img/example.jpg" />
$(function() {
 $("img.lazy").lazyload();
});

Démo. : Options de base

CONSEILS : La largeur et la hauteur de l'image doivent être définies ici, sinon le plug-in risque de ne pas fonctionner correctement.

Définir le seuil

Par défaut, l'image sera chargée lorsqu'elle apparaît à l'écran. Si vous souhaitez charger l'image à l'avance, vous pouvez définir l'option Définir le seuil sur 200. afin que l'image soit chargée lorsqu'elle est à 200 pixels de l'écran

Définissez les événements pour déclencher le chargement <. 🎜>

Vous pouvez utiliser des événements jQuery tels que le clic et le survol de la souris. Vous pouvez également utiliser des événements personnalisés, tels que sporty et foobar. La valeur par défaut est d'attendre que l'utilisateur fasse défiler vers le bas et que l'image apparaisse dans la fenêtre. Chargez les images uniquement lorsque l'utilisateur clique dessus :

$("img.lazy").lazyload({
 threshold : 200
});

Démo : Chargez les images après un délai de cinq secondes

Utiliser des effets spéciaux

$("img.lazy").lazyload({
 event : "click"
});

Par défaut, le plugin attend que l'image soit complètement chargée et appelle show(). Vous pouvez utiliser n’importe quel effet de votre choix. Le code ci-dessous utilise fadeIn (effet de fondu).

Démo : effet de fondu

Pour les situations où JavaScript n'est pas activé

Presque tous Dans les navigateurs, JavaScript est activé. Cependant, vous souhaiterez peut-être toujours afficher des images réelles sur les clients qui ne prennent pas en charge JavaScript. Pour dégrader correctement lorsque le navigateur ne prend pas en charge JavaScript, vous pouvez écrire le fragment d'image réel dans la balise