在jquery函数完全加载之前添加加载

问题描述

我在WordPress模板中使用了光滑的滑块，并且在加载项目时遇到了一些问题，我想隐藏所有项目，直到插件完全加载并带有加载图标

这是我的jquery函数：

$(document).ready(function(){
  $('.slider').slick({
    rtl: true,infinite: true,centerMode: true,slidesToShow: 1,slidesToScroll: 1
  });
});

解决方法

在document.ready中渲染脚本会在运行脚本之前等待html页面加载。而是直接拨打电话。 为确保安全，请将脚本放置在html页面顶部。

<script>
    $('.slider').slick({
    rtl: true,infinite: true,centerMode: true,slidesToShow: 1,slidesToScroll: 1
  });
</script>

,

根据您的情况，您可以添加CSS以隐藏visibility: hidden光滑的滑块，直到完全加载为止。 Slick加载后将添加类slick-initialized。因此添加CSS以显示。 CSS代码如下所示，

.slider { visibility: hidden; }
.slider.slick-initialized { visibility: visible; }