Images not lazy loading when infinite and previous button clicked.

[srussking]

Hi,

I've run across a strange bug that depends on a number of factors.

• Number of slides in the carousel (7 seems to show the break most clearly)
• Infinite scroll
• Lazy loading

If the stars align, the carousel will not lazy load the first two images after you hit previous. If you hit it again, they will load in and everything will be fine. But the first time you hit previous will get:

We are using a placeholder image to keep the height stable as the new slides are loaded in, which is why the fiddle has a src and data-lazy, but this doesn't seem to be a factor on whether or not it attempts to load those images.

Fiddle http://jsfiddle.net/srussking/8v9ubrcr/2/ (updated)

[simeydotme]

the stars wont align if you don't provide a functioning test-case :confused: :stars:

[srussking]

Ugh, I have no idea how to save in their new system... maybe this one, seems to work when I try it on a different browser. http://jsfiddle.net/srussking/8v9ubrcr/2/

[unzsnu]

Same issue for me. $(".crsl").slick({infinite:true,lazyLoad:'ondemand',adaptiveHeight:true, touchMove: true, fade: true, cssEase: 'linear'}); Going back starting from the first image, it lazyloads the last image, but with height:0. Setting infinite: false is a solution, but not for this problem.

[simeydotme]

I think, at the line ~1496 the code needs to change to:

if( _.currentSlide >= _.slideCount - _.options.slidesToShow ) {
    loadRange = 
        _.$slider.find('.slick-slide:not(.slick-cloned)')
            .slice(_.slideCount - _.options.slidesToShow, _.slideCount);
} else {
    loadRange = 
        _.$slider.find('.slick-slide')
            .slice(rangeStart, rangeEnd);
}

But I haven't done extensive testing on it. I wonder if @leggomuhgreggo wants to try my code out and do a bunch of testing? ... lol ... I imagine this could possibly have regression impact on centerMode and variableWidth... :joy: :kiss:

[leggomuhgreggo]

@simeydotme I was thinking the same thing!

[simeydotme]

https://github.com/kenwheeler/slick/blob/48961abda1b14627c23d75605b43bd782be898c1/slick/slick.js#L1496

[leggomuhgreggo]

Forked the repo and updated that line. Here're some test-cases in a sweet, sweet fiddle

Looks like we're still getting daggered by centermode. Started trying to untangle the logic but thought I'd put it up in case anyone else wanted to look.

[simeydotme]

even without the code change: http://jsfiddle.net/8v9ubrcr/6/ CenterMode is f00ked when infinite and lazyloading.

[leggomuhgreggo]

Hah! Word, well, in that case, I'll move forwards with a PR. Thanks @simeydotme

[rafaelboschini]

Lazyload not working here. :-(

{ lazyLoad: 'progressive', slidesToShow: 1, slidesToScroll: 1, dots: true, infinite: true, variableWidth: true, autoplay: false, autoplaySpeed: 3000 })

[Slluxx]

nevermind. if you have rows activated (in my case 4x4), and fade it will load a huge amount of images and it looked like it will just load everything. Fade disabled and it loaded just the active 4x4 grid images.