jquery同位素在過濾器按鈕未按下之前不工作jquery

Question

當我加載我的頁面時，同位素不會啓動。

我試圖使用同位素（從isotope.metafizzy.co）與過濾按鈕。

這是我的HTML和JS代碼：

<div class="scroll-pane"> 
    <div id="container" class="isotope"> 
     <div class="isotope-item box-item size1 group1"> 
      <img width="190" height="130" src="..." class="wp-post-image" /> 
      <a href="..." class="projDescription">Some text here</a> 
      </div>  
     <div class="isotope-item box-item size1 group1 group2"> ... </div> 
     <div class="isotope-item box-item size3 group1"> ... </div>  
     .. 
    </div> 
</div> 

<ul id="filters"> 
    <li><a href="#" data-filter="*" class="selected">Show all</a></li> 
    <li><a href="#" data-filter=".group1">Kategorija1</a></li> 
    <li><a href="#" data-filter=".group2">Kategorija2</a></li> 
    <li><a href="#" data-filter=".group3">Kategorija3</a></li> 
</ul> 

JS：

jQuery(window).load(function(){ 
    jQuery('#isotope_content').isotope({   
     layoutMode: 'masonryHorizontal', 
     masonryHorizontal: { 
      rowHeight: 132 
     } 
    }); 
    jQuery("ul#filters li a").click(function() { 
     jQuery("ul#filters li a").not(this).removeClass("selected"); 
     jQuery(this).toggleClass("selected"); 
    }); 

    jQuery(".box-item").hover(function(){ 
     jQuery(this).children(".projDescription").stop().fadeTo(350,0.9)}, 
     function(){ 
      jQuery(this).children(".projDescription").stop().fadeTo(350,0) 
     } 
    ); 

    jQuery('#filters a').click(function(){ 
     var selector = jQuery(this).attr('data-filter'); 
     jQuery('#container').isotope({ 
     filter: selector 
     }); 
     return false; 
    });  
}); 

的問題是，當頁面加載第一次那麼同位素不工作，什麼都不會發生在圖像上。如果我按任何過濾器按鈕（顯示所有或任何其他），然後它的作品。

我無法用JsFiddle重現這個問題。只有這樣才能看到它在線 - http://dev.metolat.lv/

網站加載沒有同位素功能，但按「顯示全部」後，它按預期重新排序圖像。

只是一個說明 - 我使用Wordpress來創建此頁面，但我不使用任何插件的同位素，而是我直接包括它。

我相信這可能是腳本和圖像加載順序的東西，但我無法解決這個問題。

Answer 1

從我看到的沒有元素的ID爲isotope_content你在初始化時喂入同位素。然而，有一個div content，您可以在您的過濾器中使用點擊處理程序 - 它可以工作。所以改變isotope_content爲content它應該工作。

順便說一句。 load是自（ 1.8）起的已棄用jQuery方法。如果您遇到圖像問題，您還可以查看同位素作者的另一個名爲imagesLoaded的插件（無論如何，它應該與同位素捆綁在一起）。