Slick: Option to select how many images to preload with lazyload

[alancwoo]

The only feature I am wishing for would be the ability to choose how many images to preload like the numImagesToPreload feature in Royal Slider (referring to royal slider documentation - options - numImagesToPreload).

A page I'm working on will have many carousels, around 10-15, with 5-10 images each. On Demand lazy loading helps, but means a delay every time the user changes the image.

Progressive lazy loading means a decent first load of the initially visible images, but a lot of bandwidth used otherwise for images that may never actually be seen.

(Otherwise I am of course so happy with slick, it's an amazing library, many thanks)

[simeydotme]

no help for the code/plugin, but your UX seems a bit shoddy...

If even one of your users will be using a mobile device on a data plan; you _need_ to use ondemand and forget about thinking you know best how many images your users want to download... carousels are notoriously un-used (http://shouldiuseacarousel.com/) though and my gut-feeling is if your page has 10+ then your users will never see slide#2 of most of them... meaning ondemand is definitely the right choice. :smile:

Just my opinion, though.

[alancwoo]

This is why I thought being able to select how many images are preloaded would be ideal.

For example, I would ideally always have the carousel only preload the next image. Thus a page with 10 carousels would load 20 images on load (even better would be to not even load the images below the fold until visible/scrolled to).

In this case it's a portfolio page with a small selection of projects and a selection of images per project.

I suppose what I can do is lazy load each project when scrolling down, but the simplest solution would just be able to preload the next image in the carousel rather than only load it and have the resulting delay when switching to it.

[simeydotme]

Right I see, I think what you're looking for then is how many "next" slides to preload on demand (n+1, n+2, etc), it sounded like you wanted to preload x slides at page-load :smile: -- can imagine this would be difficult in an infinite carousel to calculate :P

[alancwoo]

Yes exactly, as mentioned in the OP, the Royal Slider implements this type
of functionality as an option.

On Thu, Nov 27, 2014 at 4:30 PM, Simon Goellner [email protected]
wrote:

Right I see, I think what you're looking for then is how many "next"
slides to preload on demand (n+1, n+2, etc), it sounded like you wanted to
preload x slides at page-load [image: :smile:] -- can imagine this would
be difficult in an infinite carousel to calculate :P

—
Reply to this email directly or view it on GitHub
https://github.com/kenwheeler/slick/issues/834#issuecomment-64803660.

[juli3773]

Hi!

I purposed the nextSlidesToPreload option.
Here is the JsFiddle http://jsfiddle.net/dmhzc360/1/

[kdesigns]

I needed this function too but because SlickSlider doesn't support different sources for 72dpi and retina images I had to use another plugin. I chose lazyLoadXT (https://github.com/ressio/lazy-load-xt).
I implemented it using:

slickSlider.on('afterChange', function() {
    var activeSlide = $('.slick-slide.slick-active');
    activeSlide.next().find('img[data-srcset]').lazyLoadXT({
        show: true
    });
});

[Djules]

There is another value for lazyLoad option in the source code, not documented though: 'anticipated'.

It seems to do what the OP was looking for.

[jamesinealing]

From what I have seen 'ondemand' on an autoplay slideshow always seems to pull in required images about 2 slides ahead of when they will be used, which feels like it handles this in a pretty sensible way

[Luc45]

Any news about this? (sorry for duplicate)

[pminf]

@kdesigns In version 1.9.0 there is no function called lazyLoadXT. Is there a new way to lazy load the next image?

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  console.log(nextSlide);
});

nextSlide is just the index but you need the slide object to use the 'lazyLoad' function

[janumedia]

@pminf have you tried slickNext ?

$('.your-element').slick('slickNext');

[bYemma]

There is another value for lazyLoad option in the source code, not documented though: 'anticipated'.

Why is this not documented? Works like exspected and was introduced in release 1.7.1

Edit: Pull request is existing but open for docs update #3213