同位素插件：如何使用 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;
    });

});

更新：

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

});

我正在链接到页面 header 中的 imagesLoaded 脚本，但在检查 Chrome 中的页面时出现以下错误：

Answer 1

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

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

Answer 2

没有 Link 查看您的其余代码，我正在根据您的控制台日志错误进行有根据的猜测。控制台显示 "imagesLoaded is not a function" 表示 imagesLoaded.js 文件未作为脚本加载或加载不正确。 isotope 的早期版本包含 imagesLoaded 但当前版本没有 (v3)，因此需要单独加载它。确保 imagesLoaded.js 和 isotope.js 加载 after jQuery.

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

Isotope Plugin: How to use the imagesLoaded option?

javascript

php

jquery

wordpress

jquery-isotope