Jquery 滑动滑块（Ken Wheeler）-在加载之前隐藏滑块

我目前正在使用Slick（Ken Wheeler）滑块功能。它当前只在页脚中加载了两个变量

        $('.slickSlider').slick({
              dots: true,
              fade: true
        });

我目前正在体验jquery的就绪功能，在加载jquery之前，我可以看到一切都中断了。是否仍有隐藏滑块或修复此问题的方法？首先加载，或者在完成所有资产之前不加载任何内容

提前感谢。

编辑

如果只是在执行脚本之前等待文档加载并准备就绪的问题，那么以下方法可以起作用：

$(function() {
    $('.slickSlider').slick({
        dots: true,
        fade: true
    });

    $('.slickSlider').show();
});

CSS如下所示：

.slickSlider {
    display: none;
}

---

这假设您已通过Display:None隐藏了.slick滑块，因此在您通过jQuery取消隐藏之前，用户不会看到它。

为什么不使用document.ready函数：

$(document).ready(function(){
   $('.slickSlider').slick({
        dots: true,
        fade: true
    });

    $('.slickSlider').show();
});

---

简明扼要

在滑块元素上放置一个类，并将其设置为display:none。 在css中，添加

.slick-initialized{ 
    display: block 
}

更好的方法是将不透明度添加到slider元素类中：0，然后添加

.slick-initialized{
    opacity:1;
    transition:opacity .3s ease-out;
}

到你的css

.slider { display: none; }
.slider.slick-initialized { display: block; }

---

这是最简单的方法。

我既不想使用

.show（）

也不想使用

.slick初始化

因为它依赖于可以更改的3d party脚本。我注意到我的源代码如下所示：

<div id="main-slider-whatever">
    <div>
        <a href="">
            <img src="1.jgp />
        </a>
    </div>
    <div>
        <a href="">
            <img src="2.jgp />
        </a>
    </div>
    ...
</div>

---

它只支持此序列，并且仅当图像是我容器的直接子对象时才隐藏图像，没有在初始化后添加的任何其他光滑类

对不起，我想我可能在上面的帖子中感到困惑，没有ajax调用，滑块会断开，直到页面完全加载，然后它会自行修复，我需要它，这样它要么在页面加载之前隐藏滑块，要么先加载光滑的滑块。我已经编辑了我的响应，以演示jQuery的文档就绪功能。抱歉，这是它当前包装的内容，只有在dom已准备好其他编辑时。我们的想法是对用户隐藏类的所有实例，直到文档准备好并且可以在所述类上调用slider函数。这样更好吗？你明白了吗？我在寻找同样的解决方案。我尝试了@m.casey的解决方案，但无法实现。下面的解决方案对我有效。这是一种更好的方法，因为切换不透明度可以避免滑块显示时的高度跳跃

#main-slider-whatever>div>a>img {
    display: none;
}