OwlCarousel preload image in background

Question

I'm using owlcarousel 2 with lazyload options true, i want to start preloading of next slides images in background while user seeing first image of carousel so user doesn't see the loader and directly see the loaded image in next slides

here is my html code

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

here is my javascript code

$(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

The documentation offers a lazyLoadEager option: https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

So adding "lazyLoadEager: 1" to your options should do the trick.

Answer 2

Not sure why but my first item is 2 so i had to increment total by 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 3

following al404IT answer I managed to have the carousel preloading the next image in this way. As I'm showing a portion of the next image I also needed to make the next image visible.

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