Lazyload с lazysizes. js и Slick. js не работает - PullRequest
Новая
       36

Lazyload с lazysizes. js и Slick. js не работает

0 голосов
/ 14 февраля 2020

У меня есть angularjs веб-приложение со списком элементов. Каждый из них представлен каруселью со сликом. js. Чтобы улучшить производительность при загрузке, я хочу использовать стратегию двойной отложенной загрузки на своем веб-сайте:

  1. Для скользких снимков в карусели я использую lazyload: «ondemand». Здесь все работает. Первая картинка загружается, остальные загружаются только по запросу (при нажатии следующей кнопки).
  2. Помимо первой, я хочу использовать lazysizes. js для загрузки только видимых фотографий. Я использую aFarkas lazysizes со многими другими фотографиями на сайте и отлично работает. Но я не могу заставить его работать с пятном. js Карусель.

Пожалуйста, найдите пример: HTML: 

<div class="slick-container">
  <div class="item" ng-repeat="photo in item.photos" slick>
    <img data-lazy="//{{CDN_URL}}/img/items/{{item.id}}/m/{{photo.name}}.{{photo.mime}}" class="lazyload"/>                         
  </div>
</div>

JS: Слик инициализация 

$(".slick-container").not('.slick-initialized').slick({ 
                slidesToShow: 1,
                slidesToScroll: 1,              
                focusOnSelect: true,
                infinite: false,               
                dots: true,               
                lazyLoad: 'ondemand',
              });

Неважно, где я размещаю класс lazyload, в img или в div контейнера, он загружает первое изображение всех элементов.

...