Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Load only when visible #201

Closed
ymantijunk opened this issue Nov 27, 2015 · 5 comments
Closed

Load only when visible #201

ymantijunk opened this issue Nov 27, 2015 · 5 comments

Comments

@ymantijunk
Copy link

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
Copy link
Owner

aFarkas commented Nov 27, 2015

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
Copy link

akroii commented Jul 29, 2016

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
Copy link
Owner

aFarkas commented Jul 29, 2016

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
Copy link

akroii commented Jul 29, 2016

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
Copy link
Owner

aFarkas commented Jul 29, 2016

lazysizes already does this by default. see here: #284 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants