Question

我正在使用带有内置延迟加载功能的slick.js轮播来显示全屏图像库。我遇到的一个问题是延迟加载器只显示使用img标签，所以我不能应用background-size：cover来覆盖它，我不想通过使用js插件使其全屏来过度使用它。有没有人有任何想法？

Answer 1

你真的应该使用img标签。您无法在div代码上使用延迟加载，因为光滑只会将延迟加载效果添加到img属性集的data-lazy标记中。来自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 */
}

然后在lazyLoad设置为ondemand或progressive的情况下调用光滑的插件：

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

Working demo

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

使用slick.js轮播和延迟加载程序显示全屏图像轮播

1 个答案: