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 : ["", ""],
});
});
onLazyLoaded
to the options. The documentation for version 2 is insufficient, at least for me, but if you've found the next item in the carousel the image can be preloaded with something likevar nextPic = new Image(); nextPic.src = $(nextItem).find('img').attr('data-src');