Lazysizes: Load only when visible

[ymantijunk]

Hi,

Thanks for the great work I have a slightly different requirement. We have a single page website and most images are on the bottom section of the page which is visited very rarely. Hence, we really don't want to load images (even in lazy mode) unless user views that part of the page (either by scrolling or by clicking internal link). To make it a generic requirement, Is it possible to load images only when image elements are in visible portion of the browser.

Thanks

[aFarkas]

lazysizes does not load all images lazily, only images that are less than 500-750 pixel away from the viewport.

If you lower this to 0, the user has to wait for images as soon as he scrolls into this area.

You can modify the expand option:

window.lazySizesConfig = window.lazySizesConfig || {};

window.lazySizesConfig.expand = 10; //default 360-500
lazySizesConfig. expFactor = 1.5; //default: 1.7

Please close if this helps.

[akroii]

But why are images still loaded, even they are not in viewport and not visible? You can check it in chrome browser (network tab).

My config:

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.loadMode = 1;
window.lazySizesConfig.srcAttr = "src";
window.lazySizesConfig.srcsetAttr = "srcset";
window.lazySizesConfig.sizesAttr = "sizes";
window.lazySizesConfig.expand = 1;
window.lazySizesConfig.expFactor = 1.4;
window.lazySizesConfig.hFac = 0.4;

[aFarkas]

The folowing config doesn't make sense:

window.lazySizesConfig.srcAttr = "src";
window.lazySizesConfig.srcsetAttr = "srcset";
window.lazySizesConfig.sizesAttr = "sizes";

Your markup should not include the actual image(s) inside the src or srcset attributes.

[akroii]

Thanks, this was very important for me.. lazysizes works.
It is possible to load only images which are very near to the viewport?

Two cases:

• Homepage is a Slider with big images. -> Possible to load images according to his priority?
  For example: First image [preload and show], then second image [preload, but not in Viewport], then third [not in Viewport, no preload] ...
• Subpage is a list of images -> possible to load one after one which are in viewport?

[aFarkas]

lazysizes already does this by default. see here: https://github.com/aFarkas/lazysizes/issues/284#issuecomment-229710376