Guide d'utilisation du plug-in d'image de chargement paresseux jQuery Lazy Load_jquery

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. Le navigateur passe à l'état prêt après le chargement des images visibles. Dans certains cas, cela peut également aider à réduire la charge du serveur.

Comment utiliser ?

Lazy Load dépend de jQuery. Veuillez ajouter le code suivant dans la zone d'en-tête de la page :

Copier le code Le code est le suivant :

Vous devez modifier le code HTML. Définissez l'image du symbole du stand dans l'attribut src. La page de démonstration utilise une image GIF grise de 1 × 1 pixel et vous devez définir l'URL de l'image réelle sur l'attribut data-original. . Ici, vous pouvez définir une classe spécifique pour obtenir l'objet image qui doit être chargé paresseusement. De cette façon, vous pouvez simplement contrôler la liaison du plug-in.

.

Copier le code Le code est le suivant :

Le code de traitement des images est le suivant.

Copier le code Le code est le suivant :

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

Cela entraînera le chargement paresseux de toutes les images avec la classe paresseuse. Vous pouvez vous référer à la démo des options de base

.

Régler la sensibilité

JavaScript est activé dans presque tous les navigateurs. Cependant, vous souhaiterez peut-être toujours afficher de vraies images sur les clients qui ne prennent pas en charge JavaScript. Pour se dégrader correctement lorsque le navigateur ne prend pas en charge JavaScript, vous pouvez écrire de vrais fragments d'image

Copier le code Le code est le suivant :

Les espaces réservés peuvent être masqués via CSS.

Copier le code Le code est le suivant :

.paresseux {
affichage : aucun ;
>

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.

Copier le code Le code est le suivant :

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

Ceux-ci sont facultatifs, mais doivent être effectués si vous souhaitez que votre plugin rétrograde en douceur.

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 de seuil Définir le seuil sur 200 pour que l'image se charge à l'avance lorsqu'elle est à 200. pixels loin de l'écran

Copier le code Le code est le suivant :

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

Image de balise

Vous pouvez également définir une image d'espace réservé et définir des événements pour déclencher l'action de chargement. À ce stade, vous devez définir une adresse URL pour l'image d'espace réservé. Les images transparentes, grises et blanches de 1 × 1 pixel sont déjà incluses dans le fichier. plugin À l'intérieur.

Chargement déclenché par un événement

L'événement peut être n'importe quel événement jQuery, tel que : clic et survol de la souris. Vous pouvez également utiliser des événements personnalisés, tels que : sporty et foobar. Par défaut, il est dans un état d'attente jusqu'à ce que l'utilisateur fasse défiler jusqu'à la position du. image sur la fenêtre. En gris Pour empêcher l'image d'espace réservé de se charger jusqu'à ce qu'elle soit cliquée, vous pouvez faire ceci :

Copier le code Le code est le suivant :

$("img").lazyload({
Espace réservé : "img/grey.gif",
Événement : "clic"
});

Utiliser des effets spéciaux

Lorsque l'image est entièrement chargée, le plug-in utilise la méthode show() par défaut pour afficher l'image. En fait, vous pouvez utiliser tous les effets spéciaux que vous souhaitez traiter. Le code suivant utilise l'effet FadeIn This. est la page de démonstration de l'effet

.

Copier le code Le code est le suivant :

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

La photo 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. Tout ce que vous avez à faire est de définir le conteneur comme un objet jQuery et de le passer en paramètre à la méthode d'initialisation. une page de démonstration à défilement horizontal et une page de démonstration à défilement vertical.

Copier le code Le code est le suivant :

#conteneur {
Hauteur : 600 px ;
Débordement : faites défiler ;
>
$("img.lazy").lazyload({    
conteneur : $("#conteneur")
});

Quand les photos ne sont pas rangées dans l'ordre

Lors du défilement de la page, Lazy Load parcourra les images chargées. Dans la boucle, il détectera si l'image est dans la zone visible. Par défaut, la boucle s'arrêtera lorsque la première image n'est pas dans la zone visible. zone est trouvée. L'image est considérée comme distribuée de manière fluide, l'ordre des images dans la page est le même que l'ordre dans le 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 de limite d'échec

Copier le code Le code est le suivant :

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

Définissez la limite d'échec sur 10 afin que le plug-in arrête la recherche après avoir trouvé 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 paresseux des images

Une fonction incomplète du plug-in Lazy Load, mais elle peut également être utilisée pour implémenter le chargement paresseux des images. Le code suivant implémente le chargement après le chargement de la page, 5 secondes après le chargement de la page. la zone spécifiée se chargera automatiquement. Il s'agit de la page de démonstration à chargement paresseux.

Copier le code Le code est le suivant :

$(function() {                                                  $("img:sous la ligne de flottaison").lazyload({
        événement : "sportif"
}); }); $(window).bind("charger", fonction() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000 });
;

Chargement des images cachées

Il peut y avoir de nombreuses images cachées enfouies sur votre page. Par exemple, si le plug-in est utilisé pour filtrer la liste, vous pouvez modifier en permanence l'état d'affichage de chaque élément de la liste afin d'améliorer les performances. Le chargement ignore les images cachées par défaut. Si vous souhaitez charger des images cachées, veuillez définir skip_invisible sur false

.

Copier le code Le code est le suivant :

$("img.lazy").lazyload({
Skip_invisible : faux
});

以上所述就是本文的全部內容了，希望大家能夠喜歡。

請您花一點時間將文章分享給您的朋友或留下評論。我們將由衷感謝您的支持！