1

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 : ["", ""],
   });
});
2
  • You can add a callback 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 like var nextPic = new Image(); nextPic.src = $(nextItem).find('img').attr('data-src');
    – RonaldPK
    Commented Sep 21, 2015 at 17:31
  • did you find a solution?
    – al404IT
    Commented Dec 21, 2015 at 13:49

4 Answers 4

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

}); 
2

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

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.

0

lazyLoadEager Type: Number Default: 0

Eagerly pre-loads images to the right (and left when loop is enabled) based on how many items you want to preload.

In owl.carousel.min.js you should find the line by searching for: lazyLoad

// e.Defaults={lazyLoad:!1,lazyLoadEager:0},
//False -> !1 : 1 is true so you should try with 1 in case that is not taking true as a parameter that you are passing on init. Lazy Load Eager represents the number of elements that you want to preload for example, two images, so you might want to try with setting that by default too.
    e.Defaults={lazyLoad:!1,lazyLoadEager:2},


/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */

A demo, but I do not see it working at all maybe because of image placeholder not being present currently, but at least can give you a hint on how to do it can be the following, directly from the developer.

https://owlcarousel2.github.io/OwlCarousel2/demos/lazyLoad.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.