Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lazy load N images ahead of current slide

See original GitHub issue

With lazy loading turned on, swiping in images brings in an empty space which is only filled once the image loads. It would be nice if the next image was already loaded.

My initial idea for a solution is an option lazyLoadAhead (or something) which, if set to true would load the next set of images as well as the current one. (The current set wouldn’t be reloaded because the code ignores images that have had their data-lazy attribute removed.) In other words, the lazy loader would always be one step ahead of the user.

A simple way to do this would be to put

var slidesToLoad = (_.options.lazyLoadAhead ? 2 : 1) * _.options.slidesToShow;

at the top of the following block from lazyLoad, and replace all the references to _.options.slidesToShow with slidesToLoad. I’m fairly confident it would work well for the centerMode: false case, but I haven’t thought through all the scenarios for centerMode: true. An easy way to avoid having to think that through is to only apply it in the false case and make a note in the docs that it’s currently incompatible with centerMode: true.

(Note that I didn’t change anything in the code below, it’s just here for illustration.)

if (_.options.centerMode === true) {
    if (_.options.infinite === true) {
        rangeStart = _.currentSlide + (_.options.slidesToShow/2 + 1);
        rangeEnd = rangeStart + _.options.slidesToShow + 2;
    } else {
        rangeStart = Math.max(0, _.currentSlide - (_.options.slidesToShow/2 + 1));
        rangeEnd = 2 + (_.options.slidesToShow/2 + 1) + _.currentSlide;
    }
} else {
    rangeStart = _.options.infinite ? _.options.slidesToShow + _.currentSlide : _.currentSlide;
    rangeEnd = rangeStart + _.options.slidesToShow;
    if (_.options.fade === true ) {
        if (rangeStart > 0) rangeStart--;
        if (rangeEnd <= _.slideCount) rangeEnd++;
    }
}

loadRange = _.$slider.find('.slick-slide').slice(rangeStart, rangeEnd);
loadImages(loadRange);

if (_.slideCount == 1){
  cloneRange = _.$slider.find('.slick-slide')
  loadImages(cloneRange)
} else if (_.currentSlide >= _.slideCount - _.options.slidesToShow) {
    cloneRange = _.$slider.find('.slick-cloned').slice(0, _.options.slidesToShow);
    loadImages(cloneRange)
} else if (_.currentSlide === 0) {
    cloneRange = _.$slider.find('.slick-cloned').slice(_.options.slidesToShow * -1);
    loadImages(cloneRange);
}