jquery - OwlCarousel 在背景中预加载图像

Question

我正在使用 owlcarousel 2，延迟加载选项为 true，我想在用户看到轮播的第一张图像时开始在后台预加载下一张幻灯片图像，这样用户就不会看到加载程序并直接在下一张幻灯片中看到加载的图像

这是我的 html 代码

<div class="inner-gallery">
  <div id="inner-gallery">
   <div class="gallery-item">
         <div class="gallery-item2">  
           <img class="lazyOwl" data-src="<?php echo $image[0]; ?>" alt=""/>
         </div>
   </div>
  </div>
</div>

这是我的 JavaScript 代码

$(document).ready(function(){
   $("#inner-gallery").owlCarousel({
    navigation : true, // Show next and prev buttons
    autoPlay : false,
    slideSpeed : 300,
    lazyLoad:true,
    paginationSpeed : 400,
    singleItem:true,
    autoHeight : true,
    navigationText : ["", ""],
   });
});

Answer 1

不知道为什么，但我的第一项是 2，所以我必须将总计增加 2

var mycarousel = $('#inner-gallery');

mycarousel.on('loaded.owl.lazy', function(event) {

    var nextpic = new Image();
    var totitem = event.item.count + 2;     
    var nextitem = event.item.index + 1;

    if (nextitem <= totitem) {
        var imgsrc = $(event.target).find('.gallery-item').eq(nextitem).find('img').data('src');
        nextpic.src = imgsrc;
    }

});