使用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

如果不是完全預期的行爲，不要猶豫地說。