<div class="element hybrid a" data-category="hybrid">
<p class="type">H</p>
<h2 class="name">Name</h2>
<p class="strain-info">No Info Available</p>
<p class="review"><a class="button radius small black review-form-lb" href="#review-form-lightBox">Review</a></p>
</div>
例如,当我运行下面的代码,它基本上添加了一个类到元素点击,这需要几秒钟的元素放大.
$container.on( 'click','.element',function() {
$( this ).toggleClass('large');
$container.isotope('layout');
});
另一个例子是,如果我有一个按钮组包含几个选项来过滤画廊,再次需要几秒钟.过滤器JS：
$('#filters').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 = '';
for ( var prop in filters ) {
filterValue += filters[ prop ];
}
// set filter for Isotope
$container.isotope({ filter: filterValue });
});
这是$container的变量
// init Isotope
var $container = $('.isotope').isotope({
itemSelector: '.element',layoutMode: 'fitRows',filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
}
});
我应该注意到,当有少量的项目时,上面的代码很好.如何提高画廊的表现？
我应该注意到,在版本1的同位素我有相同的画廊,它的工作正常.由于增强了同位素的能力,我正在升级.
Here is the live site – 重要！ – 这个网站是美国科罗拉多州的一个大麻药房.网站可能不适合工作.
更新
我试着把所有的div改成li元素.没有看到太多的改善.
我试着打开每mfirdaus的硬件加速度的答案,但似乎没有起作用.
注意：以上链接到实时网站是一个剥离的版本,我删除了所有不需要的同位素图库.它比我最初发布的要快一点,但是它需要更加敏感.尝试在平板电脑上使用它,同位素项目需要几秒钟的时间来响应.
更新2
一个同位素的一个表现更好的一个大的画廊,我最终使用版本一,因为这个.
解决方法
.element {
...
/* add this. prefixes for compabtibility */
transform:translate3d(0,0);
-webkit-transform:translate3d(0,0);
-moz-transform:translate3d(0,0);
}
在我的测试中,似乎加快了它的速度.
另一个建议是用.on(“mousedown”)替换.on(“click”).鼠标释放后单击触发,而鼠标在用户按下鼠标后会立即触发.有一个〜0.2s的差异,但有些显而易见.
Here’s an example made from isotope’s default example which has 400 elements.
更新
测试touchstart后,它有帮助,但即使滚动也会触发.所以这有助于只有当你禁用滚动/有固定的视口.也许你可以添加iScroll,但是我估计这更加膨胀.
您可以尝试的一个选择是强制元素首先调整大小,然后等待同位素重新计算位置.我们可以通过在同位素刷新上使用setTimeout来实现.不确定行为是否可以接受,但这将允许用户更快地获得反馈.所以你的切换代码将是：
$container.on( 'click',function() {
$( this ).toggleClass('large');
setTimeout(function(){ $container.isotope('layout'); },20); //queue this later
});
Demo.在我的Android设备上测试过,似乎有一个改进.
