如何在光滑的滑块中延迟加载图片元素？答案

【问题标题】：How lazy load picture element in slick slider?如何在光滑的滑块中延迟加载图片元素？
【发布时间】：2021-01-19 11:21:14
【问题描述】：

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>

【问题讨论】：

标签： lazy-loading slick.js webp

【解决方案1】：

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

图片标签sn-p

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

【讨论】：

【解决方案2】：

根据源代码：https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1541 仅使用图像标签。如此简短的回答：您可以编写自己的函数来覆盖延迟加载函数，应该不会太难。

【讨论】：

需要详细说明吗？