HOW TO: prevent images lazyloaded below the fold.

[conandrum]

On my homepage http://207.154.243.82/ I have a full-screen slider.
I would like all images below the fold to remain UNLOADED until the user scrolls further down.
Unfortunately almost all images load, even below the fold - only 5 images near the footer remain unloaded.
There needs to be 735px of space between the bottom of my slider and the next image, in order for lazyloading to pause image loading.

I have tried other lazyloaders like W3TC's which behave more closely to what I would like.
So my question is this: How can I configure your application to achieve what I envision?
Thank you very much

[aFarkas]

lazysizes works with a dynamic expand. Which means the image that are inside of the viewport are loaded immediately while images close to the viewport are preloaded after load. This happens in three phases and results into the situation that images that are inside of the viewport are loaded without any space given to preloading only later this will be expanded. At the end it might be more complicated than other lazyloaders but it improves the user experience.

You can as this is described in the readme change it by changing especially the options expand and expFactor.

I would only go with expand.

For example:

import lazySizes from 'lazysizes';

lazySizes.cfg.expand = 100;

Now the algorithm works with 3 values: 0, 100 and 150. Maybe closer to what you envision? But I would not exaggerate it the preloading technique is quite useful and a good thing for the user.

[conandrum]

What value does your app use by default?
So in order to stop images from getting loaded after the fold, should I increase or decrease this value?
Thank you

[aFarkas]

@conandrum
This is also already documented in the readme. It says 370-500 depending on the viewport size of your browser. The 100 was a suggestion by me for you.