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

Question

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

这是我的 jquery 函数：

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

Answer 1

在 document.ready 中呈现脚本会在运行脚本之前等待 html 页面加载。而是直接拨打电话。将脚本放在 html 页面的顶部以确保万无一失。

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

Answer 2

对于您的情况，您可以添加 CSS 以隐藏 visibility: hidden 光滑的滑块，直到它完全加载。 Slick 将在加载后添加 class slick-initialized。所以添加 CSS 来显示。 CSS 代码如下所示，

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

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

Add loading before jquery function loaded completely

jquery

function

loading