Discussion :

[castelcerf]

Bonjour,

je viens vers vous car après une semaine d'essai je continue de patauger.
J'essai pour le site d'amis de réaliser une page d'accueil responsive, qui classe par hasard l'ensemble de leurs projets (image) avec masonry.
Jusque là pas de problème. Seulement tous les projets cela fait un peu lourd à charger, l'emploi de lazyload me paraissait une solution astucieuse pour complèter le site.

Vous pouvez voir le résultat ici qui fonctionne assez bien dans firefox:
http://test.cas-p.net/-pipolass-

voici mon code:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
$(document).ready(function(){
//-----------------------------------XX--SCRIPT masonry--XX 
    var $container = $('.masonry');
    container.imagesLoaded(function(){
         //first masonry call on placeholder images
        $container.masonry({
          transitionDuration: 0,
          itemSelector: 'article.bloc',
          columnWidth: 'article.w1'
        });
        //------XX-- lazyload --XX
            //load images who appears on the screen after masonry effect
        $('article.bloc img').addClass('not-loaded');
        $('img.not-loaded').lazyload({
              effect: 'fadeIn', 
              threshold : 900,
              load: function() {
                       // Disable trigger on this image
                       $(this).removeClass("not-loaded");
                      //reload masonry with real images size
                       $container.masonry({
                            transitionDuration: 0,
                            itemSelector: 'article.bloc',
                            columnWidth: 'article.w1'
                       });
              }
        });
        $('img.not-loaded').trigger('scroll');
     });
//-----------------
});

En revanche dans chrome et safari j'ai des problèmes (je n'ai même pas testé IE pour le moment :/ )
Les soucis sont très certainement du à la rapidité d'execution des script et des temps de chargement.

On constate dans ces navigateurs, qu'à la fin de la page, le bloc .masonry se superpose avec mon footer; et parfois certaines images ayant conservé leur taille lorsqu'elle avait encore la taille avant chargement de l'image, se superpose avec d'autre ayant pris leur taille correct.
Pire dans safari, une fois sur deux, aucune image ne prend sa taille normal. On est obligé d'effectuer un scroll pour que tout se remette en ordre.

Cela m'agace car j'y suis presque.. mais c'est pas encore cela.
Très certainement des questions d'ordres d’exécution des scripts et temps de chargement des images.

Peux être devrais partir dans une tout autre direction pour rendre les choses plus propres je ne sais pas...
Le fait est que masonry à besoin de la taille des images pour fonctionner. Et inversement lazyload à besoin que masonry ai déjà classé les images une première fois pour déterminé quelle image doivent s'afficher.

Je spécifie bien le height et width de mes balise <img> lorsqu'elle on pour source le blanc.gif; mais cela ne semble aider à rien, sans doute à cause de mon système d'image responsive dans le css en % et avec height:auto.

je suis preneur de toute solution.
Cordialement.

Edit:

Après quelques test, peux être y a t'il une source du problème dans mon css img height:auto; Mais ce n'est pas certain.

En mettant ce code à la place:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
var $container = $('.masonry').masonry();
$container.imagesLoaded(function(){
	// initialize
	$container.masonry({
		transitionDuration: 0,
		itemSelector: 'article.bloc',
		columnWidth: 'article.w1'
	});
	//------XX-- lazyload --XX
	$('article.bloc img').addClass('not-loaded');
	$('img.not-loaded').lazyload({
		effect: 'fadeIn', 
		threshold : 900,
		load: function() {
		// Disable trigger on this image
		$(this).removeClass("not-loaded");
		$container.masonry('reload');
		}
	});
	$('img.not-loaded').trigger('scroll');
});

Cela fonctionne de façon indentique dans firefox, chrome et safari.
masonry fonctionne, cependant le resultat n'est pas vraiment satisfaisant, car alors toutes les images font une hauteur identique de 400 alors que certaine de mes image ont une hauteur inférieur..

[castelcerf]

Bon j'ai trouvé une solution. le problème venait de mon height:auto;

Voici donc un code qui marche

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 
//-----------------------------------XX--SCRIPT masonry--XX	
 
//on indique que les images ne sont pas encore charge
$('article.bloc img').addClass('not-loaded');
 
function resizeBlankImages() {
		$('img.not-loaded').each(function () {
		var originalWidth = $(this).attr('width');
		var originalHeight = $(this).attr('height');
		var ratioH = originalWidth/originalHeight;
		var width = $(this).width();
		var height = width/ratioH;
		$(this).height(height);
	});
}
 
var $container = $('.masonry');
$container.imagesLoaded(function(){
	//on rearrange la taille des images
	resizeBlankImages();
	//on initialise masonry
	$container.masonry({
		transitionDuration: 0,
		itemSelector: 'article.bloc',
		columnWidth: 'article.w1'
	});
	//------XX-- lazyload --XX
	$('img.not-loaded').lazyload({
		effect: 'fadeIn', 
		threshold : 600,
		load: function() {
			$(this).removeClass("not-loaded");
			$(this).css('height', 'auto')
		}
	});
	$('img.not-loaded').trigger('scroll');
 
});