我想在owl轉盤2中設置預加載程序圖像。我已經閱讀了文檔，但我沒有找到任何使用lazyload插件選項中預加載程序映像的信息。

以下是插件網站:

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

我的代碼:

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

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

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

  <a  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。

你能幫我一下嗎？ 非常感謝

您可以設置加載器gif的背景圖像。另外，我已經將OwlCarousel調用包裝在$(window)中。load()，這樣它將在啟動之前等待圖像加載，而加載程序將處理任何未樣式化的內容(FOUC)

$(window).on('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" >
<link rel="stylesheet" >

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

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

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

  <a  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>