Isotope.jsはロード後に列にステークされたアイテムを表示します

Question

おはよう、 isotope.jsで作成したレイアウトに問題があります。私は私の会社がしたいくつかの仕事のセクションを並べ替えるためにスクリプトを私のウェブサイトに追加しました。ここまでは順調ですね。私は少しカスタマイズしましたが、それを動作させることができましたが、アニメーションの最初の段階で読み込むと、アイテムが積み重なって1秒未満で表示されます。

はここに私のコードです：

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; 
    }); 
}); 

あなたはお気づきのように

、それがロードされた直後に、数分の1秒間、divに列が積み重なり、列に表示された後にのみ表示されます。

私が間違ったことを考えましたか？

Answer 1

は«リソースとその依存リソースのロードが終了したとき、負荷イベントが発生します。»Reference

だから$(document).ready(function(){で$(window).load(function(){を交換し、同位体は、イメージのロードが完了していない場合でも、インスタンス化されます。

EDIT

問題は本当にすべての画像をロードした後に同位体がインスタンス化されていることです。

ので、散歩が
... 0にコンテナのopacityを設定することで、一度すべてのイメージがロードされ、同位体がインスタンス化され、CSSでopacity 1に

を設定します：

JSで

.portfolioContainer{ 
    opacity:0; 
} 

、$container.isotope({の閉鎖backet後：

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