OwlCarousel预装图像在背景中

我正在使用带有lazyload选项的owlcarousel 2，我希望在用户看到旋转木马的第一张图像时开始在后台预加载下一张幻灯片图像，这样用户就看不到加载器并在下一张幻灯片中直接看到加载的图像

这是我的HTML代码

 
 
 
 <img class="lazyOwl" data-src="" alt=""/> 
 
 
  

这是我的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; } }); 

Answer 2

在al404IT回答后，我设法让旋转木马以这种方式预加载下一张图像。 当我显示下一个图像的一部分时，我还需要使下一个图像可见。

 mycarousel.on('loaded.owl.lazy', function(event) { var totitem = event.item.count + 2; var nextitem = event.item.index + 1; if (nextitem <= totitem) { var imgsrc = $(event.target).find('.item').eq(nextitem).find('img').data('src'); console.log($(event.target).find('.item').eq(nextitem).find('img').attr("src")); $(event.target).find('.item').eq(nextitem).find('img').attr("src", imgsrc).css("opacity", "1"); } });