Slick.js：隐藏滑块，直到图像加载完毕 [英] Slick.js: Hide slider until images have loaded

问题描述

使用 Slick.js ，如何隐藏幻灯片，直到图片加载或至少加载了第一张图片为止？我尝试使用 init 但无法使其正常工作。也没有输出到控制台。

Using Slick.js, how does one hide the slide until the images have loaded or at least the first image has loaded? I tried using init but couldn't get it to work. Nothing is outputted to the console, either.

var $slider = $('.slider').slick({
    fade: true,
    focusOnSelect: true,
    lazyLoad: 'ondemand',
    speed: 1000
});

$('.slider').on('init', function(slick) {
    console.log('fired!');
    $('.slider').fadeIn(3000);
});

我还试过窗口加载，但是也没有解决它。

I also tried window load, but that didn't fix it either.

$(window).load(function() {
    $('.slider').fadeIn(3000);
});

http：// jsfiddle.net/q5r9ertw/

推荐答案

我知道这是一个老问题，但这对我有用情况，当问题是所有幻灯片一次显示，这看起来很可怕和跳跃。

I know it's an old question, but this worked for me in a similar situation, when the problem was that all slides were displayed at once and this looked horrible and jumpy.

解决方案是纯CSS。

首先，将CSS添加到光滑的滑块包装器中：

First, you add CSS to your slick slider wrapper:

.your-slider-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
}

滑块初始化后，浮动将.slick-initialized类添加到wrapeper 。您可以使用它来添加：

After slider is initialized, the slick adds .slick-initialized class to the wrapeper. You can use this to add:

.your-slider-wapper.slick-initialized {
    visibility: visible;
    opacity: 1;    
}

希望这可以帮助那些偶然发现这个问题的人。

Hope this helps someone who stumbles upon this question as I did.

这篇关于Slick.js：隐藏滑块，直到图像加载完毕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！