lazy-loading - 如何在光滑 slider 中延迟加载图片元素？

Question

Ken Wheelers 光滑的 slider 非常适合 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>

Answer 1

光滑的 slider 仅支持图像标签，但我们可以添加一些自定义代码来延迟加载图片标签的图像。

图片标签片段

<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);
  });