Slick-Slider 初始化尽可能快 - 不要等待 $(document).ready(function($)

Question

我们通过"；推迟"；属性。

<script defer src="https://domain.xyz/templates/js/slick.min.js"></script>

我们希望滑块能够尽快构建，因此理想情况下，我们希望滑块的产品(应用程序是在线商店(一加载到DOM中，Slick滑块就立即初始化。

在初始化光滑滑块的示例中，他们总是在通过加载EVERYTHING时进行初始化

$(document).ready(function($){
$('.myslider').slick({
dots: true,
infinite: false,
speed: 300,
slidesToShow: 5,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 4,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 700,
settings: {
slidesToShow: 3,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}
]
});

});

但我们不想等待document.ready，因为在第一个滑块之后有很多内容要加载，我们希望它能尽快显示出来。

Answer 1

解决了它。我修改了slick.js文件，并将此语句放在最后(在正常的slick.js代码之后(：

(function () {
var evt = document.createEvent("Event");
evt.initEvent("slickLoaded",true,true);
document.dispatchEvent(evt);
})();

然后，我为该事件创建了一个事件侦听器：

<script>
document.addEventListener("slickLoaded", function() {
console.log('slick was loaded');
});
</script>

Answer 2

使用css制作光滑的滑块显示：none，然后在文档准备好时显示块。

Answer 3

就我而言，永远不要编辑核心页面。最好的办法是找到另一个解决方案。希望有人能把解决方案