同位素与过滤器计数和图像加载

Question

我有一个用同位素过滤的大网格对象。我正在使用组合过滤器和搜索框，我还使用了imagesLoaded(因为项目数量很大，所以是必要的)。

我还想打印过滤的项目数。我遵循这里的说明

下面是我的代码:

jQuery(document).ready(function($){
// quick search regex
var qsRegex;
// init Isotope
var $grid = $('.grid').imagesLoaded( function() {
    $grid.isotope({
    itemSelector: '.status',
    getSortData: {
        name: '.elemsort',
    },
    sortBy : 'name',
});
});
var iso = $grid.data('isotope');
var $filterCount = $('.filter-count');
// store filter for each group
var filters = {};
$('.filtersbutton').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
    updateFilterCount();
});
// bind filter on select change
$('.filterstextsearch').on( 'change', '.button-group', function() {
    var $this = $(this);
    // get group key
    var filterGroup = $this.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.find(':selected').attr('data-filter');
    // combine filters
    var filterValue = concatValues( filters );
    // set filter for Isotope
    $grid.isotope({ filter: filterValue });
    updateFilterCount();
    $(':selected', this).addClass('is-checked').siblings().removeClass('is-checked')
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', '.button', function() {
        $buttonGroup.find('.is-checked').removeClass('is-checked');
        $( this ).addClass('is-checked');
    });
});
// flatten object by concatting values
function concatValues( obj ) {
    var value = '';
    for ( var prop in obj ) {
        value += obj[ prop ];
    }
    return value;
}
// use value of search field to filter
var $quicksearch = $('.isofilter').keyup( debounce( function() {
    qsRegex = new RegExp( $quicksearch.val(), 'gi' );
    $grid.isotope({
        filter: function() {
            return qsRegex ? $(this).text().match( qsRegex ) : true;
        }
    });
    updateFilterCount();
}, 200 ) );
function updateFilterCount() {
  $filterCount.text( iso.filteredItems.length + ' items' );
}
updateFilterCount();    
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
  var timeout;
  return function debounced() {
    if ( timeout ) {
      clearTimeout( timeout );
    }
    function delayed() {
      fn();
      timeout = null;
    }
    timeout = setTimeout( delayed, threshold || 100 );
  }
}
});

我怀疑它不工作的原因是我使用imagesLoaded?在控制台中，我得到"TypeError: iso未定义"。但我不知道该怎么解决。

Answer 1

好了，两天后，我自己设法找到了一个解决方案。问题是由于imagesLoaded。所以我像这样替换了代码的"//init同位素"部分，现在计数工作了。

// init Isotope
var $grid = $('.breakdown').isotope({
    itemSelector: '.status',
    getSortData: {
        name: '.elementsort',
    },
    sortBy : 'name',
});
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

这个选项的问题是，现在加载页面比加载所有图像后初始化同位素时慢得多。如果有人有解决这个问题的办法，我将不胜感激。