使用slick.js旋转木马和懒加载程序来显示全屏图像旋转木马

Question

我使用slick.js旋转木马以及内置的延迟加载功能来显示全屏图像库。我遇到的一个问题是，懒惰的加载程序只能使用img标签显示，所以我无法应用background-size：cover，并且我不想通过使用js插件使其变成全屏来矫正它。有没有人有任何想法？

Answer 1

你真的应该使用img标签。您不能在div标签上使用延迟加载，因为浮油只会将延迟加载效果添加到属性集的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

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