Mauerwerk & LazyLoad nicht zusammen arbeiten wollen

In Ihrem Fall, wenn Sie sind erstellen von Mauerwerk und hinzufügen lazyload Wirkung, die Bilder werden überlappt.

Müssen Sie führen Sie die Schritte wie :

1. Erstellen Sie Dynamische HTML-Struktur für Bilder, die zusammen mit Ihren jeweiligen Seitenverhältnis von Höhe und Breite. Hinweis: sollen die Bilder mit den benötigten Attributen für die Anwendung von lazy load Effekt, d.h. class="lazy" data-original="eigentliche Bild-url" und src="dummy " imageurl".

2. Gelten lazy load Effekt.

3. Dann erstellen Mauerwerk.

Können Sie ein Beispiel :

Angenommen, ich habe ein javascript-array mit einem Bild bezogene Daten,

var gallery_itemList= [
    {url: "images/example1.jpg", width:"1170", height:"460"},
    {url: "images/example2.jpg", width:"800", height:"320"},
    {url: "images/example3.jpg", width:"1200", height:"870"}];

- Und unterhalb Prototyp für die Erstellung von dynamischen html-Anwendung lazyload-Effekt und erstellen von Mauerwerk-Effekt als :

var masonryGallery = {
    gallery :'', //gallery to create
    genarateGallery : function() {
      //generate each item html
      var inHTML="", i;
      for(i=0;i<gallery_itemList.length;i++){
        var iWidth, iHeight, fHeight=0;
        iWidth=parseInt(gallery_itemList[i].width);
        iHeight=parseInt(gallery_itemList[i].height);
        fHeight = Math.round((iHeight*300)/iWidth);

        inHTML+='<div class="item" style="height:'+fHeight+'px">';
        inHTML+='<img class="lazy" src="images/loading.gif" data-original="'+gallery_itemList[i].url+'"/>';
        inHTML+='</div>';   
      }
      //add generated html to gallery
      $(masonryGallery.gallery).append(inHTML);       
    },
    applyLazyload : function(){
      $("img.lazy").lazyload();
    },
    createMasonry : function(){
      //create Masonry
      $(masonryGallery.gallery).masonry({
        columnWidth: 350,
        itemSelector: '.item',
        isFitWidth: true,
        isAnimated: !Modernizr.csstransitions
      }).imagesLoaded(function() {
        $(this).masonry('reload');
      });
    },
    init : function(givenGallery) {
        masonryGallery.gallery = givenGallery; //set gallery 
        masonryGallery.genarateGallery(); //generate gallery html
        masonryGallery.applyLazyload();  //apply lazyload effect
        masonryGallery.createMasonry();  //apply masonry effect
    }
};

/* Gallery Intialisation */
(function(){masonryGallery.init('div#content');})(); 

Nur dazu beitragen wollen, meine Lösung für dieses leidige problem.

Grundsätzlich müssen Sie rufen Mauerwerk ist layout() - Funktion jedes mal, wenn ein Bild lazyloaded, denn das ist, wenn Sie wissen, was Sie Dimensionen gehen werden. So dass Sie setup-lazyload ist load() - Funktion aufrufen masonry.layout(). Dies kann die Ursache für ein neues problem, denn auf der ersten Seite geladen, alle Ihre Bilder haben eine null oder nahe-null-Höhe (je nach css), und somit stapeln sich in den top viewport. Beim initialisieren lazyload, es sehen alle diese Bilder im Ansichtsfenster, und versuchen, laden Sie Sie alle auf einmal. Dies bewirkt, dass Sie zum download-Tonnen von Bildern, und noch schlimmer, ruft Mauerwerk Dutzende oder Hunderte Male. Nicht sehr schnell.

Meine Lösung ist zu zwingen, eine minimale Höhe auf Bilder entladen, bis Sie lazyloaded. Dies schränkt die Anzahl der Bilder, die gefunden werden im Ansichtsfenster zunächst die Begrenzung der Anzahl von lazyload und Mauerwerk Anrufe auf einen angemessenen Betrag.

Sobald ein Bild geladen ist, entfernen Sie die .unloaded - Klasse, um deconstrict die Höhe und ermöglichen es entspricht der Höhe des Bildes.

HTML -

<div id="masonry-container">
    <div class="masonry-item unloaded"><img class="lazy" data-original="image.jpg"></div>
    <!-- Repeat as needed -->
</div>

CSS

.masonry-item {
    width: 33.3%; //I'm doing a 3-column masonry layout
}

.unloaded {
    min-height: 200px;
    //set a minimum default height for image containers
    //this prevents too many images from appearing in the viewport
    //thus causing lazy load to load too many images at once
    //we will use the lazyload .load() callback to remove this fixed 
}

JS

$( document ).ready(function() {    
    //Initialize Masonry
    var container = document.querySelector('#masonry-container');
    var msnry = new Masonry( container, { transitionDuration: 0 } );
    msnry.layout(); //run masonry for first time

    function doMasonry() { msnry.layout(); } //gives us a function handler to call later with window.setTimeout()

    //Initialize lazyload
    $("img.lazy").lazyload({
        effect : "fadeIn", //optional
        load : function() {
            $(this).parent().removeClass("unloaded"); //select the div containing the image and remove the "unloaded" class, thus deconstricting the min-height
            window.setTimeout(doMasonry,100); //trigger masonry again with a 100 ms delay, if we do it too soon, the image may not have loaded, and masonry will layout with the wrong image dimensions (this might be a bit of a hacky way to do it)
        }
    });
});