分类导航

JavaScript 发布时间：2022-04-16 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了javascript – 大型同位素画廊非常缓慢，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

<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

一个同位素的一个表现更好的一个大的画廊,我最终使用版本一,因为这个.

解决方法

我有个建议.首先,您可以将css属性transform：translate3d(0,0)添加到.element css选择器.这将打开硬件加速,并应加快页面回流.这是一个通常用于使高度动画页面更平滑的技巧,特别是在移动设备上.所以有些事情

.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设备上测试过,似乎有一个改进.