大型同位素画廊非常慢

Question

我有一个有近400个元素的同位素画廊(版本2).典型的图库项目如下所示:

<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版中我有相同的画廊,它工作正常.我正在升级,因为同位素v2的能力增强.

这是现场 - 重要! - 这个网站是在美国科罗拉多州的大麻药房.网站可能不适合工作.

更新

我尝试将所有内容更改div为li元素.没有看到太大的改善.

我尝试按照mfirdaus的答案开启硬件加速,但似乎没有用.

注意:以上指向实时网站的链接是一个精简版本,我删除了同位素库不需要的所有内容.它比我最初发布它时略快,但它需要更具响应性.尝试在平板电脑上使用它,Isotope项目需要几秒钟才能响应.

更新2

同位素的版本之一在大型画廊中表现更好,因此我最终使用版本1.

Answer 1

我有个建议.首先,您可以将css属性添加transform:translate3d(0,0,0)到.elementcss选择器.这会打开硬件加速并加速页面重排.这是一个经常用于使高度动画的页面更流畅的提示,尤其是在移动设备上.有点像ilke:

.element {
  ...
  /* add this. prefixes for compabtibility */
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  -moz-transform:translate3d(0,0,0);
}

在我的测试中,似乎可以非常好地加快速度.

另一个建议是替换.on("click")为.on("mousedown").click释放鼠标后触发,而mousedown在用户按下鼠标后立即触发.有一个~0.2s的差异,但它有点明显.

这是一个由同位素默认示例制作的示例,其中包含400个元素.

更新

测试后touchstart,它有点帮助,但即使滚动时它也会触发.因此,仅当您禁用滚动/具有固定视口时,这才有用.也许你可以添加iScroll,但我认为这更加臃肿.

您可以尝试的一个选项是在等待同位素重新计算位置之前强制元素先调整大小.我们可以通过使用setTimeout同位素刷新来做到这一点.不确定行为是否可以接受,但这将允许用户更快地获得反馈.所以你的切换代码将是这样的:

$container.on( 'click', '.element',function() {
  $( this ).toggleClass('large');
  setTimeout(function(){ $container.isotope('layout'); },20); //queue this later
});

演示.在我的Android设备上测试了这一点,似乎有了改进.