Combinant LazyLoad et Jquery Maçonnerie

Récemment, je dois résoudre cette pour un de mes site. J'ai essayé un couple de façons, et il semble de travail.

1. Première Méthode:

• Charge de la maçonnerie sur les éléments
• Mettre un place de titulaire sur l'ensemble des images et l'utilisation lazyload sur eux
• Maintenant, lorsque chaque image feu lazyload.la charge de rappel, recharger maçonnerie -> une série de maçonnerie ("reload")
  [Mise à jour jsfiddle avec de nouvelles images, plus facile à illustrer ce point]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').addClass('not-loaded');
    $('.item img.not-loaded').lazyload({
        effect: 'fadeIn',
        load: function() {
            //Disable trigger on this image
            $(this).removeClass("not-loaded");
            $container.masonry('reload');
        }
    });
    $('.item img.not-loaded').trigger('scroll');
});

Cette méthode est bonne, mais elle a un inconvénient. La grille de mise en page peut pas être conservé le même depuis l'époque de la maçonnerie.reload() dépend de chaque image de temps de charge (c'est à dire celui censé être chargé en premier, peut-seulement de le terminer plus tard)

2. Deuxième Méthode:
Regarder sur les sites comme pinterest, je pense, il n'a pas suivi la première méthode, parce qu'ils ont le récipient boîtes disposées avant même toute image chargée, donc, ce que j'ai essayé de l'atteindre est de n'afficher que les cases avec le même ratio que les images. Les étapes sont les suivantes:

• Passer vos images de dimension (juste retour json comme {image1: [300,400],image2: [400,500]} )
• Utiliser les CSS truc pour faire de div case redimensionner
  selon le conteneur. J'ai trouvé cette astuce ici
• Lazy load comme normal, pas besoin de déclencher une recharge à partir de maintenant, sans l'image,
  les boîtes sont alr disposées correctement

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').lazyload({
        effect: 'fadeIn'
    });
    $('.item img').trigger('scroll');
});

[Édité pour ajouter le jsfiddle pour la deuxième méthode]

Avis:

• Dans ce violon, j'mettre manuellement dans le rapport hauteur/largeur de chaque image dans 'padding-bottom: xxx%", qui doit être transmis à partir de votre code serveur (reportez-vous à l'étape 1)
• Ajouté dans une bordure pour faire des boîtes visible
• Pour illustrer le fait que les boîtes seront organisées, même lorsque les images ne sont pas chargés, essayez de décommenter /*display: none */ et commentaire display: block pour #container.fluid .item img

Acclamations

OriginalL'auteur Nathan Do

softk5 réponse n'était pas de travail pour moi et causant de gel sur la plupart des navigateur. Voici mon code suivant et sa fonctionne pour moi.

jQuery(document).ready(function(){
    jQuery("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000,
        threshold: 200,
        load:function(){
            var $container = jQuery('.is_masonry');
            $container.masonry({
            }).imagesLoaded(function() {   $container.masonry();  });

        }
    });

});

OriginalL'auteur Ali Nouman

peut-être que quelqu'un va avoir des problèmes aussi , l'espoir de l'aide .

à le faire fonctionner avec wordpress photoswipe-maçonnerie thème est impossible sans plugin modification.

suivant est lié à cette modification et juste avec de la maçonnerie

a) lazyload utiliser les données originales="xxx" attribut pour définir l'url de l'image . PAS de src . vous avez besoin de placer certains de l'espace réservé . peut-être 1x1 pixel qui sera chargé sans lazyload .

b) cet espace réservé besoin de couvrir TOUT l'espace pour de futures lazyloaded image , OU de la maçonnerie fera toutes les images visibles comme lazyloading vue . c'est parce que avant les images chargées ont une taille zéro 0px x 0px . et toutes les images de l'ajustement dans la zone visible avant chargement . Lazyload compter tout le visible et le chargement de tous .

pour organiser l'espace pour de futures image, vous devez définir

style="width:xxpx;hauteur:xxpx;"

juste width="xx" et height="xx" n'est pas assez

de l'image de l'espace réservé est devenu comme :

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;">

puis appliquer un chargement différé de manière normale , et la maçonnerie . dans n'importe quel ordre .

Important - maçonnerie mise à jour de la largeur à la taille de la colonne , MAIS pas la hauteur , donc si votre taille de colonne = 50px , alors vous avez besoin de calculer la hauteur de l'espace réservé

new_height = 50 /actual_width * actual_height;

donc pour thème wordpress besoin

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2];

.....

                    <img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/>

....

puis ajouter de nouvelles lignes en dessous de la maçonnerie init

        var reloading = false;
                    $.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){



                              $('.msnry_item img').lazyload({
                                  effect: 'fadeIn',
                                  //container: container,
                                  threshold : 200,
                                  skip_invisible : false,
                                  failure_limit : 5,
                                  load: function() {
                                      if( ! reloading )
                                      {
                                         reloading = true;
                                         setTimeout(function(){ 
                                              container.masonry('reload');
                                              reloading = false;
                                         }, 500);

                                     }
                                  }
                              });

                    });

OriginalL'auteur Alexey Yakovlev