Owlcarousel2: Can the lazyload preload more images

[brutesque]

It takes a while before the image on a next slide appears, which doesn't look very user-frienldy.

[witrin]

What would you expect?

[brutesque]

It would be nice to keep loading 2 or 3 images after the current one. I've found a workaround, using jquery.lazyload with a large threshold and disabling owl's lazy option.

[witrin]

Okay that mean you would like to have something like a prefetch option for the lazyload plugin? This option would e.g. (prefetch=2) load two images before and after the current slide.

[brutesque]

Ah yes. That would be a better choice of words :)

[witrin]

Also preload would make sense ;). Anyway this would be not to hard to implement I think.

[panameraa]

What about a method for not lazy loading images in viewport?

[mjau-mjau]

what would be the benefit of not lazy loading images in viewport? They would load and display initially regardless. I would vote big thumbs up for a prefetch option.

[witrin]

When you'll be a little bit patient. With an update hopefully with in the next days there also some changes in the lazy load plugin, which would make such a feature really simple to implement I think. But I'm not sure if this will also target the need about adding new items. We'll see ...

[matzke]

+1

[realrandal]

+1 - the same current solution is real "lazy load" is even not even UX friendly name. We need "fast load", "intelligent load" or other form of PREload.

User should not need to ask about every single image to load. But they should be here loaded already awaited for his next move. So option should allow to set how many items should be loaded ahead.

Even better, is slider is set to move by whole set (not one a by one item), it should preload whole NEXT SET. If we have 4 items on screen it should preload next 3 too. If (on responsive) number of displayed items is down to 2, then it can preload just next two. Especially on mobile phones this dynamic/responsive change will makes huge difference. Because when we have space to display only one item, it should preload only next one, not next 4. Whole next set should be preloaded.

It can be auto-intelligent setting as I describe above, or allow to set different option for different width like in other owl params.

Thanks for owl!

[updansharpe]

is the prefetch code being worked on? and does it have release date? my client really needs it as we need to lazy load the homepage slider images and i really like this plugin so dont want to have to change it
thanks

[davidspiess]

+1

[druellan]

I'm not entirely sure, but I believe that if you use both scr and data-src on your HTML, images are preloaded and you have all the lazyLoad effects and callbacks.
It is a work around, but perhaps helpful until the real feature is ready.

[Jursdotme]

Prefetch would be very useful. As it is now, loading larger images makes the screen blink as the image slides into view.

[addedlovely]

+1

[joepenzo]

+1

[aleroy]

+1

...except...

In helping someone else, I realized you might want to clamp settings.items to a whole number when setting your page variable (line 86)... just in case they did something strange.

[pedromvpg]

+1 !!!

[clooth]

Any update on this?

[bryns1]

+1

[longvo55]

Use lazySizes guys, I have much success with it

[stevenbg]

Since this seems to be main issue for this feature request, can we get "approved for development" on it?

[ccharlton]

+1

[eminos]

+1

[viniciussbs]

Any news?

Setting items: 1.001 works until it shows the last image. Then it breaks.

[peterwegren]

A workable solution with a couple of variations here: https://stackoverflow.com/questions/32346288/owlcarousel-preload-image-in-background/42267289

[David-Streck]

+1

[daniloprado]

+1

[robinlambert]

+1

[richie231186]

+1

[sayjeyhi]

+1

[damien-roche]

+1

[damien-roche]

So, to clarify - the lazyLoad option simply loads images when they come into view. If you have a slider with a few images, and some are not in view, it will not magically load those images in the background. As discussed above, perhaps a prefetch option would be good.

Here is a really simple solution which I've found to work great. Use data attributes for each of your images, hook into initialized.owl.carousel and use the source(s) in your data attributes to populate your image src attribute. Thus, the carousel will instantly load, and then, in the background, it will run through your slider images and start loading them.

What does this look like in practice? Here is an implementation I worked on over the last few days. In addition to lazy loading slider images before they come into view, it also loads an appropriately optimised image based on the device/slider width. On top of that, if you change the resolution, it will automatically update the images for the new device/slider width. It isn't perfect, and I'm still moving away from jQuery, so feel free to modify. The below solution uses lodash for _.each, but I'm sure underscore could be drop-in replacement. This also wraps owl carousel, so you should be able to use it with another carousel with a few modifications.

NOTE: you WILL have to modify selectors yd__slider--hero and yd__slider__item. This is just an example of a solution and was not built for general consumption. It has worked fantastically for me in reducing load time on a homepage. I'm also not typically a JS developer, so if someone notices some really naive stuff (looking at you sliderImageSizes), please do let me know.

Couple of improvements that could be made:

1. don't update src attributes if you don't have to (currently no check)
2. allow the ability to prefetch a certain number of images
3. on load, stop autoplay and only start it when the next image(s) have loaded
4. show some kind of loading background image before images are loaded
5. completely remove jquery (mainly used for width())

On 3, my autoplay timeout is 7 seconds so it doesn't really affect me, but this could be an issue if you have a quick autoplay timeout.

// html
<img src='' data-src-small='small.png', data-src-medium='medium.png' data-src-large='large.png' />

var mySlider = (function(){
  return {
    sliderImageSizes: {
      small: 400,
      medium: 640,
      large: 1200
    },

    initialize: function(selector, options) {
      this.$slider = $(selector);

      this.$slider.on('initialized.owl.carousel resized.owl.carousel',
        { self: this }, this.loadImages
      );

      return this.$slider.owlCarousel(options);
    },

    loadImages: function(event) {
      var self = event.data.self;
      var images = event.currentTarget.querySelectorAll('.yd__slider__item img');
      var imageSize = self.sliderImageSize();

      _.each(images, function(image) {
        var imagePath = image.getAttribute('data-src-' + imageSize);

        if (imagePath != null) {
          image.setAttribute('src', imagePath);
        }
      });
    },

    sliderImageSize: function() {
      var sliderWidth = this.sliderWidth();
      var imageSize = 'large';

      _.each(this.sliderImageSizes, function(width, size) {
        if (sliderWidth <= width) {
          imageSize = size;
          return false;
        }
      });

      return imageSize;
    },

    sliderWidth: function() {
      return this.$slider.find('.owl-stage-outer').width();
    }
  }
})();

// usage

var heroSlider = mySlider.initialize('.yd__slider--hero', {
  items: 1,
  loop: true,
  nav: true,
  navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"],
  center: false,
  touchDrag: true,
  autoplay: true,
  dots: false
});