Gif loading image Owl Carousel LazyLoad в классе owl-lazy?

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

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

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

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

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

jquery html css owl-carousel

14.06.2019 04:55

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

9 456

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете установить фоновое изображение загрузчика 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>

14.06.2019 07:46

Другие вопросы по теме

Веб-скрапинг страницы с гиперссылкой

Элемент ведет себя как блок, несмотря на то, что он встроенный блок

Как добавить новую строку в столбец с помощью DTedit и shining::uiOutput?

Как опустить теги html в атрибуте таблицы mysql при выборе

Создание собственной иконки списка css

Получить номер недели при нажатии кнопки

Почему «window.onload» не работает после нажатия кнопки?

Как автоматически форматировать большой объем текста в html?

Как добавить переход по событию mouseover и mouseout

Предотвратить левое заполнение от толкания элемента вправо

Gif loading image Owl Carousel LazyLoad в классе owl-lazy?

Ответы 1

Другие вопросы по теме

Похожие вопросы