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

s4n0splo 于 2022-10-30 发布在 Java

关注(0)|答案(1)|浏览(146)

我们通过header部分中的“defer”属性加载Slick滑块1.8.1。

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

我们希望尽快构建滑块--因此理想情况下，我们希望Slick滑块的产品（应用程序是一个在线商店）一加载到DOM中就立即初始化。
在初始化光滑滑块的示例中，它们总是在通过

$(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，因为在第一个滑块之后有大量的内容要加载，我们希望它能尽快显示。

JavaScript

来源：https://stackoverflow.com/questions/73403841/slick-slider-initialize-as-fast-as-possible-dont-wait-for-document-readyf

1条答案

按热度按时间

m1m5dgzv1#

我修改了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>

赞(0）回复(0）举报 2022-10-30

我来回答

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

1条答案

相关问题

热门标签

最新问答