Isotope Plugin：imagesLoadedオプションの使い方は？

Question

私はIsotope pluginをWordpressページのグリッドに使用しています。 IsotopeのimagesLoadedオプションを使用して、ページが読み込まれたときにページ上のイメージが重ならないようにしたいと考えています。誰かが私の既存のコードでどこでどのように使用しなければならないと私に説明することができますimagesLoaded？

jQuery(function ($) { 

    var $container = $('#isotope-list');   
    $container.isotope({       
     itemSelector : '.item', 
     layoutMode : 'masonry', 
     percentPosition: true 
    }); 


    //Add the class selected to the item that is clicked, and remove from the others 
    var $optionSets = $('#filters'), 
    $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('#filters'); 
    $optionSets.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    //When an item is clicked, sort the items. 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 

    return false; 
    }); 

}); 

UPDATE：

私はimagesLoadedを追加しようとしたが、それは完全に動作を停止する同位体のプラグインが発生します。ここでimagesLoadedとのコードを追加します：

jQuery(function ($) { 

    var $container = $('#isotope-list').imagesLoaded(function() { 
     $container.isotope({ 
      itemSelector : '.item', 
      layoutMode : 'masonry', 
      percentPosition: true 
     }); 
    }); 

    //Add the class selected to the item that is clicked, and remove from the others 
    var $optionSets = $('#filters'), 
    $optionLinks = $optionSets.find('a'); 

    $optionLinks.click(function(){ 
    var $this = $(this); 
    // don't proceed if already selected 
    if ($this.hasClass('selected')) { 
     return false; 
    } 
    var $optionSet = $this.parents('#filters'); 
    $optionSets.find('.selected').removeClass('selected'); 
    $this.addClass('selected'); 

    //When an item is clicked, sort the items. 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ filter: selector }); 

    return false; 
    }); 

}); 

私はページのヘッダーにimagesLoadedスクリプトにリンクしていますが、Chromeでページを検査するとき、私は、次のエラーを取得しています：

Answer 1

あなたのイメージのすべてのコールバック関数でそれを実行してロードするまでは、例えば、同位体を初期化延期することができます。

var $container = $('#isotope-list').imagesLoaded(function() { 
    $container.isotope({ 
     itemSelector : '.item', 
     layoutMode : 'masonry', 
     percentPosition: true 
    }); 
}); 

Isotopeを初期化し、画像がロードされた後にレイアウトを開始することができます。

// initialise Isotope 
var $container = $('#isotope-list');   
$container.isotope({       
    itemSelector : '.item', 
    layoutMode : 'masonry', 
    percentPosition: true 
}); 

// layout Isotope again after all images have loaded 
$container.imagesLoaded().progress(function() { 
    $container.isotope('layout'); 
}); 

参考：あなたのコードの残りの部分を参照するにはリンクなしでhttps://isotope.metafizzy.co/faq.html

Answer 2

は、私はあなたのコンソールログのエラーに基づいて推測を作っています。コンソールは、imagesLoaded.jsファイルがスクリプトとして読み込まれていないか、正しく読み込まれていないことを示す "imagesLoadedは関数ではありません"ということを示しています。アイソトープの初期バージョンにはimagesLoadedが含まれていますが、現在のバージョンは（v3）ではないため、別々にロードする必要があります。 jQueryの後にimagesLoaded.jsとisotope.jsがロードされていることを確認してください。