Isotope.js Anzeige Elemente in einer Spalte nach dem Laden

Question

Guten Abend, Ich habe ein Problem mit meinem Layout mit isotope.js gebaut. Ich habe das Skript zu meiner Website hinzugefügt, um einen Teil einiger Jobs zu sortieren, die meine Firma gemacht hat. So weit, ist es gut. Ich habe ein wenig Anpassung vorgenommen, und ich konnte es zum Laufen bringen, aber wenn es am Anfang der Animation geladen wird, zeigt es meinen Gegenstand für einen Bruchteil einer Sekunde gestapelt an.

Hier ist mein Code:

LINK:

http://larchedigital.com/the-work/

HTML:

<div class="portfolioFilter"> 
    <a href="#" data-filter="*" class="current">All Categories</a> 
    <a href="#" data-filter=".web">Web Design &amp; Development</a> 
    <a href="#" data-filter=".branding">Branding</a> 
    <a href="#" data-filter=".logo">Logo Refresh</a> 
    <a href="#" data-filter=".packaging">Packaging Design</a> 
    <a href="#" data-filter=".videography">Videography</a> 
    <a href="#" data-filter=".photo">Photography</a> 
</div> 

<div class="portfolioContainer"> 
    <div class="web packaging logo social-ads branding"> 
     blablabla 
    <div> 
    <div class="videography photo"> 
    </div> 
</div> 

javascript:

$(window).load(function(){ 
    var $container = $('.portfolioContainer'); 
    $container.isotope({ 
     filter: '*', 
     animationOptions: { 
      duration: 750, 
      easing: 'linear', 
      queue: false 
     }, 
    layoutMode: 'masonry', 
    masonry: { 
     isFitWidth: true 
    } 
    }); 

    $('.portfolioFilter a').click(function(){ 
     $('.portfolioFilter .current').removeClass('current'); 
     $(this).addClass('current'); 

     var selector = $(this).attr('data-filter'); 
     $container.isotope({ 
      filter: selector, 
      animationOptions: { 
       duration: 750, 
       easing: 'linear', 
       queue: false 
      } 
     }); 
     return false; 
    }); 
}); 

Wie Sie sehen können, gleich nachdem es geladen ist, werden für einen Bruchteil einer Sekunde meine Divs in einer Spalte gestapelt und erst nachdem sie in einer Reihe angezeigt werden.

Jeder Gedanke darüber, was ich falsch gemacht habe?

Answer 1

«Das Load-Ereignis wird ausgelöst, wenn eine Ressource und ihre abhängigen Ressourcen vollständig geladen haben.»Reference

So ersetzen Sie einfach $(window).load(function(){ von $(document).ready(function(){ und Isotopen-instanziiert werden, auch wenn die Bilder nicht vollständig geladen.

EDIT

Das Problem ist wirklich, dass Isotopen schließlich Bild geladen haben instanziiert wird.

So ein Spaziergang wäre die opacity des Behälters auf 0 setzen ...
Und wenn alle Bilder geladen und Isotop wird instanziiert, stellen Sie den opacity auf 1

In CSS:

.portfolioContainer{ 
    opacity:0; 
} 

In JS nach dem Schließen backt von $container.isotope({:

$(".portfolioContainer").css({"opacity":1});