Slick: LazyLoad HTML not valid & not working

Created on 18 Feb 2015  路  6Comments  路  Source: kenwheeler/slick

I have a problem with LazyLoad:

If i leave the IMG tag without a SRC set, it will be an invalid HTML code. If i put a blank.png or '#' in the src the LazyLoad is not working.

Can you fix that issue?

I need the slider to load each image ONLY when i click on the NEXT button, but its not working - not in 'ondemand' and not in 'progressive' mode...

PS: I wrote a little fix now in line #1636 to manually take the data-src attribute (with real src) and put it in the src:

_.$slides.slice(index, index + _.options.slidesToShow).attr("src", _.$slides.slice(index, index + _.options.slidesToShow).data("src"));

Most helpful comment

Hey @redworx :) , putting a blank.png is equally invalid when it comes to the crunch, so what's the problem? :confused: - if you think the plugin is not correctly replacing the src= with the data-src= then please provide a JSFiddle to demonstrate and we'll start looking at a fix :sweat_smile:

https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown
there's even a pre-made fiddle you can FORK for ease.

Simon.

All 6 comments

@redworx

How exactly does this work? Am I correct in thinking it lazy loads from the src attribute?

yes, the line of code takes the DATA-SRC and puts it into the SRC...
this works so la la ... there is just a problem with the last slide .. always flashes a white screen :/ so this is not a perfect solution ...

can anyone fix that please? slider would be perfect then :)

Hey @redworx :) , putting a blank.png is equally invalid when it comes to the crunch, so what's the problem? :confused: - if you think the plugin is not correctly replacing the src= with the data-src= then please provide a JSFiddle to demonstrate and we'll start looking at a fix :sweat_smile:

https://github.com/kenwheeler/slick/blob/master/CONTRIBUTING.markdown
there's even a pre-made fiddle you can FORK for ease.

Simon.

@simeydotme the problem is not that it replaces the src with data-src. (the code line on top here was added by myself)... this works fine ... the problem is that on the last slide - there is on load a white slide and when the slide is over it loads the image... the problem is only on last slide...

regarding blank.png ... the thing is: using a blank.png in the SRC is valid html code... have an empty or no src at all is INVALID html code :)

and the overall main problem: lazyload is NOT working here :) without my hack

Was this page helpful?
0 / 5 - 0 ratings