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但它会导致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中检查页面时出现以下错误：

Answer 1

您可以通过在回调函数中执行此操作来推迟初始化Isotope直到所有图像都已加载，例如：

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不是函数”，表示imagesLoaded.js文件未作为脚本加载或未正确加载。同位素的早期版本包含imagesLoaded但当前版本没有（v3），所以需要单独加载它。确保在 jQuery之后加载imagesLoaded.js和isotope.js。

同位素插件：如何使用imagesLoaded选项？

2 个答案: