Gif loading image Сова Карусель LazyLoad в классе сова-ленивый? - PullRequest
Новая
       62

Gif loading image Сова Карусель LazyLoad в классе сова-ленивый?

0 голосов
/ 14 июня 2019

Я хочу установить изображение preloader в owl carousel2.Я прочитал документы, но я не нашел никакой информации, чтобы использовать изображение preloader в опции плагина lazyload.

вот веб-сайт плагина:

https://owlcarousel2.github.io/OwlCarousel2/

Мой код: 


<div class="single-product owl-carousel owl-theme">
  <a href="https://source.unsplash.com/0utRJ1mZoZg/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/0utRJ1mZoZg/600x600" class="img-fluid owl-lazy" />
  </a>

  <a href="https://source.unsplash.com/aiNU4cA4UzQ/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/aiNU4cA4UzQ/600x600" class="img-fluid owl-lazy" />
  </a>

  <a href="https://source.unsplash.com/295NLwGdrKM/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/295NLwGdrKM/600x600" class="img-fluid owl-lazy" />
  </a>

  <a href="https://source.unsplash.com/NzsTFFB6Ng8/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/NzsTFFB6Ng8/600x600" class="img-fluid owl-lazy" />
  </a>
</div>

$('.single-product').owlCarousel({
 loop : true,
 items : 1,
 nav : false,
 lazyLoad: true,
});

Мне нужно предоставить изображение preloader gif,для лучшего UX.

Не могли бы вы мне помочь?Большое спасибо

1 Ответ

0 голосов
/ 14 июня 2019

Вы можете установить фоновое изображение gif загрузчика. Кроме того, я обернул вызов OwlCarousel внутри $(window).load(), чтобы он ожидал загрузки изображений, прежде чем он будет инициирован, в то время как загрузчик позаботится о любой Flash Of Unstyled Content (FOUC) 

$(window).load(function() {
  $('.single-product').owlCarousel({
    autoHeight: true,
    lazyLoad: true,
    items: 1,
    autoplay: true,
    nav: false,
    dots: true,
    loop: true,
  });
});
.owl-carousel {
  height: 300px;
}

.owl-carousel {
  background: url("https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/ajax-loader.gif") no-repeat center center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

<div class="single-product owl-carousel owl-theme">
  <a href="https://source.unsplash.com/0utRJ1mZoZg/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/0utRJ1mZoZg/600x600" class="img-fluid owl-lazy" />
  </a>

  <a href="https://source.unsplash.com/aiNU4cA4UzQ/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/aiNU4cA4UzQ/600x600" class="img-fluid owl-lazy" />
  </a>

  <a href="https://source.unsplash.com/295NLwGdrKM/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/295NLwGdrKM/600x600" class="img-fluid owl-lazy" />
  </a>

  <a href="https://source.unsplash.com/NzsTFFB6Ng8/1080x1350" data-fancybox="images">
    <img data-src="https://source.unsplash.com/NzsTFFB6Ng8/600x600" class="img-fluid owl-lazy" />
  </a>
</div>

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
...