1

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

4

1 回答 1

2

你真的应该使用img标签。您不能在div标签上使用延迟加载，因为 slick 只会将延迟加载效果添加到img具有data-lazy属性集的标签。从插件的来源：

$('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设置设置为ondemandor progressive：

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

工作演示

如果这不完全是预期的行为，请毫不犹豫地说。

于 2015-07-22T15:37:43.207 回答