Plugin de désaturation et Lazy Loading

Ayant beaucoup d'images à afficher, j'ai mis en place un plugin très connu, Lazy Load afin de ne charger les images uniquement lorsque cela est nécessaire afin d'alléger les ressources en bande passante et compagnie.

Lazy Load : http://www.appelsiini.net/projects/lazyload/enabled_noscript.html

J'ai également testé son homologue (version light) qui fonctionne parfaitement bien également :

Unveil : http://luis-almeida.github.io/unveil/

Dans les 2 cas, les scripts fonctionnent parfaitement bien, l'un comme l'autre et n'affiche que les images nécessaires donc gain de performance au chargement du site.

En parallèle j'utilise un autre plugin qui se nomme jQuery.BlackAndWhite afin de désaturer les images de cette liste : http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

J'ai testé pas mal de solutions différentes concernant la désaturation, soit uniquement via CSS ou d'autres scripts JS, mais ce script est celui qui fonctionne le mieux sur tous les navigateurs (dont mobiles).

Mon problème est qu'en mixant les 2 solutions (Désaturation + LazyLoad (ou Unveil)) les images non visibles s'affichant à la suite du scroll de l'utilisateur ne sont pas désaturées. Logique, puisque le script BlackAndWhite est chargé lors du chargement initial de la page et donc ne s'applique que sur les images déjà chargées visibles à l'écran.

Ma question, comment faire pour que le script de désaturation s'applique également aux images chargées/affichées par la suite via Lazy Load (ou Unveil)... ?

J'ai peut être un début de réponse via le site du plugin BlackAndWhite qui propose une version fonctionnelle via AJAX mais je ne parviens pas à le mettre en place dans mon projet.

Voici le code JS en exemple ainsi que le lien : http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/ajax-contents.html

$(".ajaxTrigger").on("click",function() {
	$.ajax({
		url:"index.html",
		success: function ( data ) {
			var $list = $(data).find(".wrapper").find("li"),
				$images = $list.find("img");
			$(".wrapper").append($list);
			$images.on("load",function (){
				$(this).parent().BlackAndWhite();
			});
		}
	})
});

Voici un échantillon de mon code HTML, la liste d'image concernée :

<section id="portfolio">
<ul>

<li><a href="images/portfolio/1.jpg"><figure>
<img src="img/grey.gif" data-src="images/portfolio/thumbs/1.jpg" alt="" width="390" height="390">
<noscript><img src="images/portfolio/thumbs/1.jpg" alt="" width="390" height="390"></noscript>
</figure></a></li>

<li><a href="images/portfolio/2.jpg"><figure>
<img src="img/grey.gif" data-src="images/portfolio/thumbs/2.jpg" alt="" width="390" height="390">
<noscript><img src="images/portfolio/thumbs/2.jpg" alt="" width="390" height="390"></noscript>
</figure></a></li>

</ul>
</section>

Et mes appels JS pour les différents essais de plugins :

<!-- GREYSCALE -->
<script src="js/jQuery.BlackAndWhite.js"></script>
<script type="text/javascript">
$(window).load(function(){
	$('figure').BlackAndWhite({
	});
});
</script>

<!-- UNVEIL -->
<script type="text/javascript" src="js/unveil.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("section img").unveil(0,function() {
		$(this).load(function() {
		this.style.opacity = 1;
		});
	});
});
</script>

<!-- LAZYLOAD
<script type="text/javascript" src="js/lazyload.js"></script>
<script type="text/javascript">
$(function() {          
	$("section img").show().lazyload({
		effect : "fadeIn"
	});
});
</script>
-->

Si quelqu'un veux bien me donner un pti coup de pouce...
Merci !
Modifié par yank (20 Sep 2013 - 12:55)