Блог

Слайдер Ken Wheelers slick отлично работает с обычными изображениями, такими как 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>
 

Слайдер slick поддерживает только тег изображения, но мы можем добавить некоторый пользовательский код для отложенной загрузки изображений для тега изображения.

Фрагмент тега изображения

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

согласно исходному коду:https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1541 использует только теги изображений. Итак, короткий ответ: вы можете написать свою собственную функцию для переопределения функции lazyload , это не должно быть слишком сложно.