immagini Il metodo non funziona con la muratura JQuery e lo scroll infinito

Question

Sto usando la muratura di JQuery e ora sto aggiungendo scroll infinito. Ci sono immagini in quasi ogni "mattone" in muratura e prima di usare lo scroll infinito le immagini sono state caricate bene e tutto è andato benissimo. Ho aggiunto la parte successiva del javascript per lo scroll infinito e ho aggiunto il metodo imagesLoaded all'interno, ma quando i nuovi mattoni sono stati aggiunti vengono fuori tutti impilati sopra. La mia ipotesi è che non sto aggiungendo correttamente il metodo imagesLoaded nel callback scroll infinito, ma non sono riuscito a trovare il mio errore. Ecco il codice

<script type="text/javascript"> 
    $(function(){ 
     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.tile', 
      columnWidth : 240 
      }); 
     }); 


    var $container = $('#container'); 
    $container.infinitescroll({ 
     navSelector : ".flickr_pagination",    
         // selector for the paged navigation (it will be hidden) 
     nextSelector : "a.next_page",  
         // selector for the NEXT link (to page 2) 
     itemSelector : "div.tile"   
         // selector for all items you'll retrieve 
     }, 
     // trigger Masonry as a callback 
     function(newElements) { 
     var $newElems = $(newElements); 

     $container.imagesLoaded(function() { 
      masonry('appended', $newElems); 
     }); 
     } 
    ); 
    }); 
</script> 

La prima chiamata in muratura JQuery funziona bene e non è stato toccato. È la seconda parte in cui sembra esserci un problema. Grazie per l'aiuto e fammi sapere se hai bisogno di ulteriori informazioni.

Answer 1

Ecco la risposta

$(function(){ 

     var $container = $('#container'); 
     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector : '.tile', 
      columnWidth : 240 
      }); 
     }); 

    $container.infinitescroll({ 
      navSelector : '.flickr_pagination', // selector for the paged navigation 
      nextSelector : 'a.next_page', // selector for the NEXT link (to page 2) 
      itemSelector : '.tile',  // selector for all items you'll retrieve 
      loading: { 
       finishedMsg: 'No more pages to load.', 
       img: 'http://i.imgur.com/6RMhx.gif' 
      } 
      }, 
      // trigger Masonry as a callback 
      function(newElements) { 
      // hide new items while they are loading 
      var $newElems = $(newElements).css({ opacity: 0 }); 
      // ensure that images load before adding to masonry layout 
      $newElems.imagesLoaded(function(){ 
       // show elems now they're ready 
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
      }); 
      } 
     ); 
    }); 

Il problema era che stavo chiamando .imagesLoaded() su $ container nella funzione di callback di scorrimento infinito e avrei dovuto chiamarla sul $ newElements.