如何解决如何在光滑的滑块中延迟加载图片元素?
Ken Wheelers 光滑的滑块适用于 jpeg 等普通图片。 为了提高加载性能,我尝试使用图片元素来支持 webp 回退。 data-lazy 属性仅适用于 img 标签。 是否有延迟加载 webp 图像的解决方案?
<div id="slick-slider">
<div class="item">
<picture >
<source srcset="{{ bild }}.webp" type="image/webp">
<img class="img-fluid" alt="bild 1" data-lazy="{{ bild }}.jpg">
</picture>
</div>
<div class="item">
<picture >
<source srcset="{{ bild }}.webp" type="image/webp">
<img class="img-fluid" alt="bild 2" data-lazy="{{ bild }}.jpg">
</picture>
</div>
</div>
解决方法
根据源代码:https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1541 只使用图像标签。这么简短的回答:您可以编写自己的函数来覆盖lazyload 函数,应该不会太难。
,光滑的滑块只支持图片标签,但我们可以添加一些自定义代码来延迟加载图片标签的图片。
图片标签片段
<picture>
<source media="(min-width:650px)" data-lazy="img_pink_flowers.jpg">
<source media="(min-width:465px)" data-lazy="img_white_flower.jpg">
<img data-lazy="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
用于延迟加载的jQuery:
$('.slider-selector').slick({
lazyLoad: 'ondemand',slidesToShow: 1,slidesToScroll: 1,infinite: false,dots: true,arrows: false,});
$(document).on('beforeChange','.slider-selector',function(event,slick,currentSlide,nextSlide){
var nextSlide = slick.$slides.get(nextSlide);
var $slideSoureSets = $(nextSlide).find('source');
$($slideSoureSets).each(function () {
$(this).attr('srcset',$(this).data('lazy'));
});
console.log(nextSlide);
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。