Comment implémenter le préchargement d'image et le chargement différé avec Jquery_jquery

L'exemple de cet article décrit comment Jquery implémente le préchargement des images et le chargement différé. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Il existe de nombreux projets qui doivent souvent déterminer s'il faut effectuer les opérations correspondantes après le chargement de l'image ou retarder le chargement de l'image. Bien qu'il existe déjà de très bons plug-ins sur Internet, cela semble toujours un peu gênant. de devoir charger un plug-in séparé pour ces effets, c'est tellement confortable que je viens d'écrire une méthode moi-même :
.

Copier le code Le code est le suivant :

function loadimg(arr,funLoading,funOnLoad,funOnError){
var numLoaded=0,
numErreur=0,
isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;

var arr=isObject ? arr.get() : arr;
pour (un dans arr){
var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
précharger(src,arr[a]);
>

fonction préchargement(src,obj){
var img=nouvelle image();
img.onload=fonction(){
numChargé ;
funLoading && funLoading(numLoaded,arr.length,src,obj);
funOnLoad && numLoaded==arr.length && funOnLoad(numError);
};
img.onerror=function(){
numChargé ;
numErreur ;
funOnError && funOnError(numLoaded,arr.length,src,obj);
>
img.src=src;
>
>

Description du paramètre :

arr : Il peut s'agir d'un tableau pour stocker le chemin de l'image, ou il peut s'agir de l'objet jquery de l'image sélectionnée
 ; funLoading : L'opération effectuée après le chargement de chaque image individuelle
funOnLoad : Opération après le chargement de toutes les images ;
funOnError : opération lorsqu'une erreur de chargement d'une seule image se produit.

Par exemple :

Copier le code Le code est le suivant :

var imgonload=function(errors){
             /*erreurs : nombre d'images avec des erreurs de chargement ;*/
console.log("chargé," erreurs "erreur d'images chargées!");
>

var funloading=fonction(n,total,src,obj){
          /*
n : Le nombre d’éléments chargés ;
            total : le nombre total d'images à charger
                                                                                                                                                                                    Avec le chemin de l'image actuellement chargé ;
​​​​ obj : Lorsque l'arr passé dans la fonction loadimg est un tableau stockant le chemin de l'image, obj=src est le chemin de l'image,
Lorsque arr est un objet jquery, obj est l'objet img dom actuellement chargé.
*/
console.log(n "sur" total " photo chargée.",src);
var newimg = document.createElement("img");
newimg.src=src;
$("body").append(newimg).fadeIn();
>

var funloading_obj=function(n,total,src,obj){
console.log(n "sur" total " photo chargée.",src);
$(obj).attr("src",src);
$(obj).fadeIn(200);
>

var funOnError=fonction(n,total,src,obj){
console.log("le " n "st img chargé Erreur!");
>

Exemple d'appel :

Copier le code Le code est le suivant :

console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
"/20120531/1670912_103610084349_2.jpg",
"/20120616/4952071_130629530136_2.jpg",
"/20120610/1723580_105037029000_2.jpg",
"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
],funloading,imgonload,funOnError);*/

Ce qui précède est la méthode d'écriture originale. Ensuite, nous introduisons un plug-in jQuery pour le chargement paresseux d'images basé sur Lazy Load.

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 x 1 pixel et vous devez définir l'URL de l'image réelle sur l'attribut data-original. une classe spécifique pour obtenir l'objet Image à chargement paresseux. De cette façon, vous pouvez simplement contrôler les liaisons du plugin.

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 :

.lazy {
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( );

Celles-ci sont facultatives, mais doivent être effectuées si vous souhaitez que votre plugin soit rétrogradé correctement.

Régler la sensibilité

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 x 1 pixel sont déjà incluses dans le plug-. dans.

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"
});

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. 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 :

#container {
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 plugin 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("load", function() {
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
});

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.