同位素僅在過濾或調整瀏覽器窗口大小後纔會顯示

Question

我使用Metafizzy's Isotope來顯示我的wordpress帖子，並且在採取其他操作（如過濾或調整窗口大小）之前，容器將不會顯示任何項目。然後它「醒來」並照常運作。這僅在Chrome中發生。有沒有人經歷過這個或知道解決方案？

Answer 1

我剛纔在使用ZURB Foundation 4創建一個HTML模板時，在加載這個頁面之前，我有同樣的問題，我通過在創建基礎之前調用同位素並在窗口加載回調中包裝同位素調用來解決它，例如：

// Load Isotope on window load 
$(window).load(function(){ 
    $('.portfolio-items').isotope({ 
     itemSelector:'.portfolio-item' 
    }); 
}); 

// Loaded foundation after isotope 
$(document).foundation('orbit', {timer_speed:5000,bullets:false,orbit_transition_class: 'orbit-transitioning'}); 

嘗試在負載回調窗口包裹你的同位素電話，如果不工作，然後嘗試任何其他的jQuery插件之前加載它，可能會有衝突。

Answer 2

我在加載完整圖像的頁面時遇到了同樣的問題。我簡單地設置同位素在所有圖像加載後運行：

$(function() { 
    //on all images load 

     $('img').on('load', function() { 
      //Initialise Isotope 
     }); 
});