Owl-Carousel 2.3.4 с ленивой загрузкой и автоматической шириной - PullRequest
Новая
       18

Owl-Carousel 2.3.4 с ленивой загрузкой и автоматической шириной

0 голосов
/ 30 апреля 2020

У меня есть плагин owl-carousel на моем веб-сайте, но я хотел бы предложить много изображений без увеличения начальной загрузки страницы. Я могу сделать это с помощью опции lazyLoad ( официальная демоверсия ), но смешивая ее с опцией autoWidth, изображения загружаются мгновенно.

В приведенном ниже примере есть версия с autoHeight и с autoWidth. Первое работает правильно (изображения не имеют тега src до тех пор, пока они не будут показаны), во втором случае (с autoWidth) все изображения сразу имеют тег src, что делает загрузку страницы тяжелой (и lazyLoad бесполезно).

Примечание: Перетаскивание изображений для прокрутки

Пример JSFiddle

Пример с внутренним отрывом (то же самое с JSFiddle). 

var totImg = 15;
var countWimgs = 0;
var countHimgs = 0;

$(document).ready(function() {

  // Create images for owl-carousel (h/w)
  for (var i = 0; i < totImg; i++) {
    var width = (Math.floor(Math.random() * 200) + 300);
    var src = 'https://via.placeholder.com/' + width + 'x250/0000FF/ffffff?text=Image+' + i + '+-+' + width + 'x250';
    $(".owl-carousel.h").append('<img class="owl-lazy" data-src="' + src + '" />');

    src = 'https://via.placeholder.com/' + width + 'x250/FF0000/ffffff?text=Image+' + i + '+-+' + width + 'x250';
    $(".owl-carousel.w").append('<img class="owl-lazy" data-src="' + src + '" />');


  }

  // Init owl-carousel autoHeight after 2sec
  setTimeout(function() {

    $('.owl-carousel.h').owlCarousel({
      /*loop: true,*/ // Disable for better test with correct total images count
      margin: 25,
      autoHeight: true,
      center: true,
      items: 3,
      mouseWheel: true,
      lazyLoad: true,
      lazyLoadEager: 1,
      onLoadedLazy: function(event) {
        countHimgs++;
      }
    });
  }, 2000);

  // Init owl-carousel autoWeight after 2sec
  setTimeout(function() {

    $('.owl-carousel.w').owlCarousel({
      /*loop: true,*/ // Disable for better test with correct total images count
      margin: 25,
      autoWidth: true,
      center: true,
      items: 3,
      dots: true,
      lazyLoad: true,
      lazyLoadEager: 1,
      onLoadedLazy: function(event) {
        countWimgs++;
      }
    });
  }, 4000);


  // Check SRC tag in <IMG>
  setInterval(function() {

    var countSrcH = $('.owl-carousel.h').find('img.owl-lazy[src]').length;
    $('.hImgs').html('- Images loaded: ' + countHimgs + '/' + totImg + '<br/>Total &lt;img&gt; with src tag: ' + countSrcH);

    var countSrcW = $('.owl-carousel.w').find('img.owl-lazy[src]').length;
    $('.wImgs').html('- Images loaded: ' + countWimgs + '/' + totImg + '<br/>Total &lt;img&gt; with src tag: ' + countSrcW);

  }, 500);


});
html,
body {
  width: 100%;
}

h3 {
  display: inline-block;
  margin-left: 4%;
  font-family: sans-serif;
  font-weight: normal;
}

.owl-stage {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: box;
}

.container {
  width: 90%;
  margin: 4%;
  padding: 20px;
  box-sizing: border-box;
}

.container.h {
  background-color: #AAAAFF;
}

.container.w {
  background-color: #FFAAAA;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<h3><b>lazyLoad & autoHeight</b> <span class="hImgs"></span></h3>
<div class="container h">
  <div class="owl-carousel h"></div>
</div>

<h3><b>lazyLoad & autoWidth</b> <span class="wImgs"></span></h3>
<div class="container w">
  <div class="owl-carousel w"></div>
</div>

У кого-нибудь есть решение? Спасибо

...