我使用slick.js旋转木马以及内置的延迟加载功能来显示全屏图像库。我遇到的一个问题是,懒惰的加载程序只能使用img标签显示,所以我无法应用background-size:cover,并且我不想通过使用js插件使其变成全屏来矫正它。有没有人有任何想法?使用slick.js旋转木马和懒加载程序来显示全屏图像旋转木马
回答
你真的应该使用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'
});
如果不是完全预期的行为,不要犹豫地说。
是的,这正是我在@BishopBarber之后所做的。然而,通过使用宽度和高度,img标签上的100%可以使图片倾斜很多,因此我希望使用background-size:cover,因为无论浏览器尺寸如何,都可以保持透视。有关如何解决这个问题的任何想法?并再次感谢您的帮助! –
@FrazerFindlater'object-fit:cover;'你的'img'标签是你最好的选择,只有CSS。看到我的编辑 – TheWanderingMind
是的,我想过使用它,但我不认为IE9 +处理得太好。是否有任何你知道的轻量级Jquery全屏插件?我想我可能不得不妥协。 –
- 1. Bootstrap全屏旋转木马
- 2. 旋转木马内的旋转木马
- 3. 引导旋转木马:旋转木马
- 4. 全屏旋转木马图像(引导)
- 5. 旋转木马
- 6. Famo.us图像旋转木马
- 7. 旋转木马标题未显示在全宽标题旋转木马上
- 8. 旋转木马缩略图,添加类到下一个旋转木马旋转
- 9. 旋转木马 - 将不同页面添加到旋转木马
- 10. 旋转木马博
- 11. jquery旋转木马
- 12. Papervision旋转木马
- 13. Bootstrap旋转木马
- 14. JavaScript旋转木马
- 15. iPhone - 旋转木马
- 16. Angular UI Bootstrap旋转木马全屏
- 17. Bootstrap 3旋转木马全屏闪烁
- 18. 图片库旋转木马
- 19. 视频和旋转木马
- 20. Bootstrap旋转木马控制旋转木马之外
- 21. 父级旋转木马里面的儿童旋转木马js
- 22. 如何让旋转木马滚动旋转木马Bootstrap
- 23. 使Android旋转木马自动旋转
- 24. 光滑的旋转木马 - 显示旋转木马盒内的盒子
- 25. Bootstrap旋转木马:以动画方式在旋转木马中设置图像
- 26. 角旋转木马用3个图像
- 27. Slick.js旋转木马检测最后拇指加载更多
- 28. 图像未显示全尺寸Bootstrap旋转木马
- 29. JavaScript隐藏并显示旋转木马
- 30. 角度2旋转木马不显示
如果您提供了一些代码[和一个小提琴],我可以尝试帮助你。 – TheWanderingMind
谢谢@BishopBarber。这里有一个jsbin http://jsbin.com/yijiyuyekidu/1/edit?html,css,js输出我希望这可以帮助! –