web-dev-qa-db-fra.com

Combinaison de maçonnerie LazyLoad et Jquery

J'ai essayé de reconstituer la maçonnerie et les outils de moo lazyload, mais ils ne semblent pas très bien s'harmoniser, même si c'est peut-être simplement dû au fait que je suis légèrement inutile au codage! 

La maçonnerie fonctionne sur cette page .

Cependant, lorsque j'essaie de l'associer à lazyload, il semble totalement gâcher. Quelqu'un at-il une idée de la façon de mettre en œuvre les deux plugins ensemble? 

J'ai passé 6 jours à essayer de comprendre et c'est mon dernier espoir, ha!

Merci 

jqueryjquery-masonrylazy-loading
13
user554954

Récemment, je dois résoudre ce problème pour l'un de mes sites Web. J'ai essayé plusieurs façons et cela semble fonctionner. 

1. Première méthode:  

  • Charger la maçonnerie sur les objets
  • Mettez un espace réservé sur toutes les images et utilisez lazyload dessus
  • Maintenant, lorsque chaque image déclenche un rappel lazyload.load, rechargez la maçonnerie -> une série de maçonneries ('reload')

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 disposition de la grille risque de ne pas être conservée car le temps de masonry.reload () dépend du temps de chargement de chaque image (c'est-à-dire que celle supposée être chargée en premier pourrait ne se terminer que plus tard).

2. Deuxième méthode: Regardez des sites tels que pinterest, je pense, elle ne suit pas la première méthode, car ils ont les boîtes de conteneurs rangées avant même que les images ne soient chargées. essayé de réaliser consiste à afficher uniquement les cases avec le même ratio que les images. Les étapes sont les suivantes:

  • Passez la dimension de vos images (il suffit de renvoyer un JSON comme {image1: [300,400],image2: [400,500]})
  • Utilisez l’astuce CSS pour redimensionner la boîte de division En fonction du conteneur. J'ai trouvé cette astuce ici
  • Charge lente comme d'habitude, pas besoin de déclencher de rechargement depuis maintenant, sans l'image, Les cases sont déjà correctement rangées

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]

Remarquer:

  • Dans ce violon, je saisis manuellement le rapport hauteur/largeur de chaque image dans 'padding-bottom: xxx%', qui devrait être transmis à partir du code de votre serveur (reportez-vous à l'étape 1).
  • Ajouté dans une bordure pour rendre les boîtes visibles
  • Pour illustrer le fait que les boîtes seront agencées même lorsque les images ne seront pas chargées, essayez de supprimer les commentaires /*display: none */ et de commenter display: block pour #container.fluid .item img.

À votre santé

25
Nathan Do

J'ai posté la même réponse sur d'autres articles du même sujet. Si vous avez le problème, les images se chevauchent, j'ai trouvé la solution sur le site ci-dessous, bien qu'elle soit en japonais.

http://www.webdesignleaves.com/wp/jquery/1340/

J'espère que cela aidera.

Le point est l'utilisation suivante;

$('img.lazy').load(function(){ ... })

HTML

<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>  
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>  
</div><!-- end of .work_item-->
 ....
</div><!-- end of #works_list -->

jQuery

$("img.lazy").lazyload({
    effect: 'fadeIn',
    effectspeed: 1000,
    threshold: 200
});

$('img.lazy').load(function() {
    masonry_update();
});

function masonry_update() {     
    var $works_list = $('#works_list');
    $works_list.imagesLoaded(function(){
        $works_list.masonry({
            itemSelector: '.work_item',　
            isFitWidth: true,　
            columnWidth: 160
        });
    });
 }
8
softk5

la réponse de softk5 ne fonctionnait pas pour moi et bloquait la plupart des navigateurs. Voici mon code suivant et cela 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();  });

        }
    });

});
4
Ali Nouman

La raison en est que la maçonnerie a besoin de connaître les dimensions de l’image pour disposer correctement les éléments. Cependant, LazyLoad retarde le chargement de l'image jusqu'à ce que celle-ci apparaisse dans la fenêtre d'affichage, ce qui signifie que l'image n'aura pas de dimensions (ou qu'elle aura les dimensions de l'image fictive/générique que vous avez définie comme img src).

3
Thomas Graft

peut-être que quelqu'un aura des problèmes aussi, espérons l'aide. 

le faire fonctionner avec wordpress photoswipe-maonry thème est impossible sans modification du plugin. 

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

a) lazyload utilise l'attribut data-original = "xxx" pour définir l'URL de l'image. PAS src. à vous besoin de placer un espace réservé. peut être 1x1 pixel qui sera chargé sans lazyload. 

b) cet espace réservé doit couvrir TOUS les espaces pour les futures images lazyloaded, OR maçonnerie rendra toutes les images visibles en mode de chargement par labyrinthe. c'est parce qu'avant les images chargées, sa taille est 0px x 0px. et toutes les images tiennent dans la zone visible avant d'être chargées. Lazyload compte tout comme visible et charge tout. 

pour organiser TOUT l'espace pour l'image future dont vous avez besoin 

style = "width: xxpx; height: xxpx;"

juste width = "xx" et height = "xx" ne suffit pas 

donc l'image de marque est devenue comme: 

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

puis appliquez la charge paresseuse de manière normale, et la maçonnerie. dans n'importe quel ordre. 

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

new_height = 50/actual_width * actual_height;

donc pour le 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 ajoutez de nouvelles lignes en dessous de 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);

                                     }
                                  }
                              });

                    });
0
Alexey Yakovlev