页面完全加载时初始化 Slick Slider答案

【问题标题】：Initialize Slick Slider when page loads completely页面完全加载时初始化 Slick Slider
【发布时间】：2018-03-12 16:15:57
【问题描述】：

我在每张幻灯片（文本和图像）中使用带有内容的 Slick Slider：

<div id="misresenas">
   <div class="resena">
      <!-- my content -->
   </div>
   <div class="resena">
      <!-- my content -->
   </div>
   <div class="resena">
      <!-- my content -->
   </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
      $("#misresenas").slick({
        arrows:false,
        autoplay:true
      });
  });
</script>

问题是当我加载页面时，一开始 Slick Slider 看起来像这样，一张幻灯片在另一张幻灯片上方，直到它完成加载页面然后开始工作：

我尝试将这些行放在 CSS 上，但它不起作用，滑块完全隐藏：

#misresenas{display:none;}
#misresenas .slick-initialized{display:block;}

我该如何解决？

【问题讨论】：

像.resena { display:inline-block; }这样添加css怎么样？。

标签： javascript jquery html css slick.js

【解决方案1】：

给你。将$(document).ready() 替换为$(window).load() 函数。

<script type="text/javascript">
  $(window).on('load', function() {
     $("#misresenas").slick({
       arrows:false,
       autoplay:true
     });
  });
</script>

【讨论】：

我使用了这个选项，但是在 Chrome 中加载需要很长时间，在 Firefox 和 Opera 等其他浏览器中加载速度更快。
这可能是因为其他浏览器正在向您显示您页面的缓存版本。基本上$(window).on('load', function()) 在文档完全加载时运行。请不要使用$(window).load 代替使用$(window).on('load') 我已经编辑了我的答案，请检查。

【解决方案2】：

这是正确的代码

#misresenas{display:none;}
#misresenas.slick-initialized{display:block;}

【讨论】：