同位素与过滤器计数和图像加载
Isotope with Filter Count and imagesLoaded
我有一个用同位素过滤的大网格对象。我正在使用组合过滤器和搜索框,我还使用了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未定义"。但我不知道该怎么解决。
好了,两天后,我自己设法找到了一个解决方案。问题是由于imagesLoaded。所以我像这样替换了代码的"//init同位素"部分,现在计数工作了。
// init Isotope
var $grid = $('.breakdown').isotope({
itemSelector: '.status',
getSortData: {
name: '.elementsort',
},
sortBy : 'name',
});
$grid.imagesLoaded().progress( function() {
$grid.isotope('layout');
});
这个选项的问题是,现在加载页面比加载所有图像后初始化同位素时慢得多。如果有人有解决这个问题的办法,我将不胜感激。
相关文章:
- 在通过child.print()打印之前,我如何等待图像加载到我的新窗口中
- 在检索数据时是否可以停止图像加载请求
- 如何让我的网站上的WEBP图像加载在morzilla firefox中有一个可能的解决方案吗?如果是,那么如何
- jQuery:获取图像加载错误的详细信息
- 在safari和chrome中,js图像加载产生了奇怪的结果
- 图像加载不适用于 IE 8 或更低版本
- 这个图像加载功能有什么作用
- JavaScript 图像加载器不起作用
- 动态图像加载是否会减少服务器过载
- 跨来源图像加载被拒绝-仅限iPhone-简单图像上传
- 纯javascript的进度图像加载程序仅当用户单击提交html表单时
- 使用JavaScript延迟图像加载
- 如果当前图像加载缓慢,如何加载其他图像
- HTML图像加载触发一个错误
- 将图像加载到localStorage,并将图像src设置到该位置
- jquery图像加载检查错误
- 将图像加载到织物画布背景中
- 需要在bootstrap css中单击时将图像加载为模态
- 正在显示加载..在将新图像加载到网站时播放动画
- 砖石事件:在图像加载和布局完成后调用事件