javascript - 同位素插件:如何使用imagesLoaded选项？

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

});

更新：

我尝试添加imagesLoaded，但它导致Isotope插件完全停止工作。这是添加了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中检查页面时出现以下错误：

最佳答案

您可以通过在回调函数中进行操作来推迟同位素的初始化，直到所有图像都加载完毕为止，例如：

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

或者，您可以初始化同位素，然后在图像加载后触发布局。

// 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

关于javascript - 同位素插件:如何使用imagesLoaded选项？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45811009/