300+元素上的slick.js性能

Question

这是我的幻灯片项目(虚构数据)的模板：

<div>

 <div class="previewImage">
  <img src="myimage.png" alt="myImage" />
 </div>

 <div class="summary">
  <span class="desc">desc</span>
  <span class="count">12345</span>
 </div>

</div>

这个模板被重复325次，并被初始化为一个slick.js组件：

$("#slider").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      infinite: false,
      touchMove: false
});

这会挂起Chrome / FF / IE大约2秒钟，有时甚至会给出一个"This page is freezing browser -> Kill or Wait“(意译为”此页面正在冻结您的浏览器，终止或等待“)通知。

我已经尝试过lazyLoading，但它并没有带来太大的不同(如果有的话……绝对不是可以想象到的差异)。我通过slick.js website / documentation，看不到任何其他可能有帮助的东西。

这里有什么我可以做的吗?或者我只是简单地使用它的规范之外的组件？欢迎任何想法。

Answer 1

将src更改为data-lazy。对于src，lazyload不能与Slick一起工作。