Eventi in muratura: chiama evento dopo immagini scaricato e layout completo

Question

Ecco cosa sto cercando di fare. Ho una griglia con un sacco di immagini, quindi sto usando le immagini della libreria caricata insieme alla muratura.

Ecco la mia CSS:

.grid { 
    opacity:0; 
} 

E HTML:

<div class="grid"> 
    <div class="grid-sizer"></div> 
    <div class="gutter-sizer"></div> 
    <div class="item">image</div> 
    <div class="item">image</div> 
    <div class="item">image</div> 
</div> 

Ed è qui la mia JS:

var $container = $('.grid'); 
// initialize Masonry after all images have loaded 
$container.imagesLoaded(function() { 
    $container.masonry({ 
     columnWidth: '.grid-sizer', 
     itemSelector: '.item', 
     gutter: '.gutter-sizer' 
    }); 
    $container.masonry('on', 'layoutComplete', function(){ 
     console.log('got here'); 
     $container.animate({'opacity':1}); 
    }); 
}); 

Il mio obiettivo è quello di avere la griglia di nascosto fino a quando tutte le immagini sono di carico e il layout è completo, quindi lo si dissolve. Per qualche motivo nel mio codice sopra, non entrerà mai nel layout onCom blocco completo.

Se sposto quel blocco fuori da imagesLoaded, $ container.masonry non è definito in quel punto.

Qualche idea?

FIDDLE HERE

Se si modifica l'opacità della griglia a 1 si può vedere tutto è sempre disposto bene. Sto solo cercando di capire come ottenere il layout Completo di chiamare per impostare l'opacità su 1.

Answer 1

Non è necessario utilizzare l'evento layoutComplete sulla muratura. Come puoi semplicemente aggiungere il tuo codice di animazione sotto l'inizializzazione della muratura.

Quando tutte le immagini sono caricate, verrà eseguita la funzione imageLoaded. È quindi possibile creare l'oggetto in muratura e animare subito in questo modo:

var $grid = $('.grid').imagesLoaded(function() { 
// init Masonry after all images have loaded 
$grid.masonry({ 
    columnWidth: 200, 
    itemSelector: '.item', 
    gutter: 10 
}); 
console.log('got here'); 
    $('.grid').animate({'opacity':1}); 
}); 

Ecco un jsfiddle che dimostrano che

Answer 2

jQuery(document).ready(function($){ 

    var wdm_wait = function(){ 

      jQuery("body").find("img").each(function(i) { 

        if(!this.complete) 
        { 
         return false; 
        } 

      }); 
       // when code reaches here Its assured that all the images are loaded 
     clearInterval(waiting); 
     console.log('got here'); 
     var $container = $('.grid'); 

    // initialize Masonry after all images have loaded 
     $container.masonry({ 
      columnWidth: 100, 
      itemSelector: '.item', 
      gutter: 10 
     }); 
    $container.animate({'opacity':1}); 
} 

      waiting = setInterval(wdm_wait,100); 


}); 

Questo sarebbe certamente assicurare che il codice js esegue solo dopo che tutte le immagini hanno stato caricato (renderizzato)

Spero che questo aiuti! :)

Answer 3

hanno mai provato questo, penso che questa è la vostra risposta

var $container = $('.grid').masonry({ 
     columnWidth: 200, 
     itemSelector: '.item', 
     gutter: 10 
    }); 
    $container.masonry('on', 'layoutComplete', function() {  
     $container.animate({'opacity':1}); 
    }); 
$container.masonry();