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 2b0b25ff593c5b6c03403dd6234ffb2c. 🎜>

$("img.lazy").lazyload({
 effect : "fadeIn"
});

Vous pouvez masquer les espaces réservés via CSS.

<img class="lazy" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

Dans les navigateurs prenant en charge JavaScript, vous devez afficher l'espace réservé lorsque le DOM est prêt, ce qui peut être fait en même temps que l'initialisation du plugin.

$("img.lazy") . show().lazyload();

.lazy {
 display: none;
}

L'image est à l'intérieur du conteneur

Vous pouvez utiliser le plug-in sur des images dans des conteneurs déroulants, tels que des éléments DIV avec des barres de défilement. à faire Il suffit de définir le conteneur comme un objet jQuery et de le passer en paramètre à la méthode d'initialisation

Démo : défilement horizontal dans le conteneur, défilement vertical dans le conteneur

Lorsque l'image est. discontinu

Lors du défilement de la page, Lazy Load parcourra les images chargées. Pendant la boucle, il vérifiera si l'image est dans la zone visible. Par défaut, il arrêtera de boucler lorsqu'il trouvera la première image. qui n'est pas dans la zone visible. Les images sont considérées comme distribuées en continu. Oui, l'ordre des images dans la page est le même que celui du code HTML. Mais dans certaines mises en page, cette hypothèse n'est pas vraie. . Cependant, vous pouvez contrôler le comportement de chargement via l'option Failurelimit

Définissez la limite d'échec sur 10 pour que le plug-in fonctionne. arrêtez la recherche uniquement lorsqu'il trouve 10 images qui ne sont pas dans la zone visible. Si vous avez une mise en page encombrante, veuillez définir ce paramètre plus haut

Chargement des images cachées

$("img.lazy").lazyload({
 failure_limit : 10
});

Il peut y avoir de nombreuses images cachées. enterré sur votre page. Par exemple, le plug-in est utilisé pour filtrer la liste, et vous pouvez modifier à tout moment l'état d'affichage de chaque élément de la liste. Pour améliorer les performances, Lazy Load ignore les images cachées par défaut. pour charger des images cachées, veuillez définir skip_invisible sur false

Télécharger le plugin

La dernière version du code source et du code compressé. Le plug-in est déjà disponible sur les navigateurs Safari 5.1, Safari 6, Chrome 20, Firefox 12 d'OSX, Chrome 20 de Windows, les navigateurs IE 8 et IE 9 et iOS5 (iPhone). et Testé sur le navigateur Safari 5.1 de l'iPad).

Pour des explications plus détaillées sur les articles liés au lazyload et au chargement paresseux de jQuery, veuillez faire attention au site Web PHP chinois !