javascript - 同位素插件 : How to use the imagesLoaded option?

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

});

更新:

我尝试添加 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