Jquery lazyload avec ajax

Remarque: au moment où cette réponse a été acceptée, cela a fonctionné. Le plugin de chargement paresseux a changé et maintenant il est cassé. Je ne peux pas accepter la réponse ni la supprimer.

Il existe un autre Q & A qui suggère de le gérer dans le cadre de la demande AJAX responsable de l’insertion du DOM supplémentaire:

Lier le chargement paresseux des images aux nouvelles images insérées après la requête ajax

Cependant, voici comment je le ferais:

 $(document).on('DOMNodeInserted', 'img.lazy', function() { $(this).lazyload({ effect: 'fadeIn' }); }); 

Démo: jsfiddle

En bref, le meilleur moyen d’optimiser cette opération consiste à appeler le lazyload dans la fonction de réussite de votre ajax :

 $.ajax({ url: "your url here", type: "Post", success: function(response){ // handle your success callback here $("img.lazy").lazyload({ effect : "fadeIn" }); } }); 

Mais si vous souhaitez centraliser votre appel vers le plugin lazyload, vous avez 2 options :

Premièrement: (non recommandé en raison de l’impact négatif sur les performances)

 $(document).on('DOMNodeInserted', '#container', function() { $("img.lazy").lazyload({ effect: 'fadeIn' }); }); 

mais notez ici le “#container”, c’est le sélecteur du conteneur où vous montrerez votre nouveau contenu chargé, de sorte que le code ci-dessus écoute dans ce conteneur tout matériel récemment ajouté pour exécuter à nouveau le lazyload sur de nouvelles images,

Deuxième: (recommandé)

Appelez votre lazyload personnalisé en l’ajoutant à votre JQuery:

 $.fn.myLazyLoad = function() { this.lazyload({ effect : "fadeIn" }); }; 

Ensuite, appelez-le dans toutes vos demandes AJAX:

 $.ajax({ url: "your url here", type: "Post", success: function(response){ // handle your success callback here $("img.lazy").myLazyLoad(); } }); 

Lazyload pour les images chargées après le chargement de la fenêtre (par exemple, AJAX) n’affichera aucune image avant un événement de défilement. Cela est dû au fait qu’il est codé en dur en interne pour déclencher la mise à jour initiale après le chargement de la fenêtre. Toutes les réponses ci-dessus, pour le moment, sont fausses.

En plus de la réponse de AbdelHady, vous pouvez charger paresseux de nouvelles images en cas de succès ou utiliser when() cette façon:

  $.when(load_new_image()).done(function(i){ if($('img.lazy').length){ $('img.lazy').lazyload({ effect:'fadeIn' }).removeClass('lazy').addClass('lazyloaded'); } }); function load_new_image() { return $.ajax({ url: "your url here", type: "Post", success: function(response){ //append new content $('#container').append(response); } }); } 

NOTA BENE

J’ai le même problème, lors de l’utilisation de points de cheminement, défilement infini avec image de chargement paresseux. (mais ne fonctionne pas sur le contenu ajax).

et j’ai résolu ce problème avec ceci:

 $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); $(document).bind('DOMNodeInserted', function(e) { $("img.lazy").lazyload({ effect : "fadeIn", event: "scrollstop", skip_invisible : true }).removeClass('lazy'); }); 

Je lie la configuration de chargement DOMNodeInserted sur l’événement DOMNodeInserted .

J’utilise le code ci-dessous et cela a fonctionné:

 $(document).on('ajaxStop', function() { $("img.lazy").lazyload({ effect: 'fadeIn' }); }); 

  $(document).ajaxStop(function() {$('.loading').removeClass('in'); $("img.lazy").lazyload({ effect: "fadeIn", container: $("#scrollable"), threshold: 100, }) }); 

fonctionne pour les images ajax. mais cependant, ne montrant pas la première image par défaut. la mise à jour n’est pas déclenchée.