使用 slick.js 轮播和惰性加载器显示全屏图像轮播

Question

我正在使用带有内置延迟加载功能的 slick.js 轮播来显示全屏图片库。我遇到的一个问题是惰性加载器仅使用 img 标签显示，因此我无法对其应用 background-size:cover 并且我不想通过使用 js 插件使其全屏显示来过度杀伤它。有人有什么想法吗？

Answer 1

您确实应该使用img 标签。您不能在 div 标签上使用延迟加载，因为 slick 只会将延迟加载效果添加到具有 data-lazy 属性集的 img 标签。来自plugin's source：

$('img[data-lazy]', _.$slider).not('[src]').addClass('slick-loading');

您需要做的就是将每个img 标签放入div 标签中：

<div class="a-slide">
    <img data-lazy="http://lorempixel.com/800/800/animals/"/>
</div>

然后，就像您所做的那样，将您的 html、body 和 div 标签的高度和宽度设置为 100%。但是不要忘记将您的img 标签高度和宽度也设置为 100%，因为现在您拥有它们。此外，您甚至不需要background-size:cover。但是，如果您希望您的图像不会损失太多质量，请在其上使用object-fit: cover;。您的 css 将与此类似：

html{
    height: 100%;
    min-height: 100%;
}

body{
    height: inherit;
    width: inherit;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.a-slide{
    height: inherit;
    width: inherit;
}

.a-slide img {
    height: inherit;
    width: inherit;
    object-fit: cover; /* This is a new property that can be used on img tags */
}

然后调用 slick 插件，将 lazyLoad 设置设置为 ondemand 或 progressive：

$('.lazy-slick').slick({
    lazyLoad: 'ondemand'
});

Working demo

如果这不是预期的行为，请不要犹豫。