Demo page does not appear to be lazyloading about lazysizes HOT 14 CLOSED

@salcode
Thx, but this is by design since version 0.6.0. I have changed the option preloadAfterLoad to true.

If you analyze your network panel. You will see two things:

1. The image(s) in view are downloaded as early as possible
2. The images, which are not in view, are only loaded after onload and in queue (between one and two image at the same time)

From my testing this has the following advantages:

1. good performance: performance is the same like normal lazy loading techniques
2. better UX than normal lazyloading: images are pre-downloaded in the background without blocking other downloads, so that the user doesn't have to wait for images to download as soon as the user scrolls them into view
3. better search engine support than normal lazyloading: google does evaluate JS since at least october 2014. But due to the fact, that the google bot does not perform any scrolling, normal lazyloading will hide images from google. With this technique the chance, that lazyloaded images are indexed is quite high even if you don't use the LQIP markup pattern.

The only disadvantage is, that normal lazyloading might reduce transferred data, in case a user leaves the page before he has scrolled to all areas of the page.

I might re-change this option, if this is too irritating or if developer think that the disadvantage outweighs the advantages.

Of course you can change this option at any time:

window.lazySizesConfig = {
    preloadAfterLoad: false
};

What do you think, about this option shift?

from lazysizes.

I noticed not loading full images at all on demo page... But it could be my chrome beta bug :)

About preload option - i use true on desctop and false on mobile where traffic usage could be important.

from lazysizes.

@TrilipuT
I think this is the possibly best thing you can do. Although differentiating between metered and non-metered bandwidth is impossible. How does your check look like?

About Chrome: Yeah, I think you run into this bug:
https://code.google.com/p/chromium/issues/detail?id=431862

Hope I don't need to add a workaround for this:
http://jsfiddle.net/zyjLLL81/6/

@yoavweiss
Do you know wether this bug will be fixed in Chrome (40) stable.

from lazysizes.

In future we can check connection with navigator.connection, maybe :)
I check if user is mobile with this one http://detectmobilebrowsers.com/
Works quite well.

from lazysizes.

The bug won't be fixed for 40 unfortunately. I hope I can get it in 41 before it branches

from lazysizes.

@TrilipuT

Can you confirm that you can't see this bug on the master version anymore?
https://rawgit.com/aFarkas/lazysizes/master/index.html

from lazysizes.

@yoavweiss
Thx.

from lazysizes.

@aFarkas
Still have this.
The problem is in last 2 big pictures examples "responsive image with srcset and automatic sizes attribute" and "Widgets/Javascript/Script". Other loads good.
I noticed that i have

sizes="1130px"

but biggest scrset size is 1024w. When i sizes to 1024px - it loads right image.

Also i got this problem on my project, so i need to duplicate biggest image with 2x (in this case it will be 2048w). Maybe this is chrome logic of native support of scrset? And when we use "auto" is sizes maybe it should check scrset and give value one of them?
https://cloud.githubusercontent.com/assets/1821978/5563233/f276401c-8e6b-11e4-90b0-b490883580e8.png
https://cloud.githubusercontent.com/assets/1821978/5563234/f2769684-8e6b-11e4-9b82-4620d0c9e24d.png

Tested on OS X 10.10.1 (14B25)
Chrome 40.0.2214.45 beta (64-bit)

from lazysizes.

@TrilipuT
Yeah, this would fix the bug, but would mean, that I have to implement a srcset parser + analyze the candidates (= a lot of code). I think, I got a working hack now.

from lazysizes.

@salcode
I have re-reverted the preloadAfterLoad option to false now (only in master). Because I think many people find this irritating. I will improve the readme so that people know that this option is often a good thing.

from lazysizes.

@aFarkas
I think this is the perfect way to handle it. I think the term lazyloading has specific set of expectations with it, which includes loading only when in view. I can see the value of the preloadAfterLoad and I think the README is a great way to point out the value of the setting that option.

Thanks.

I have re-reverted the preloadAfterLoad option to false now (only in master). Because I think many
people find this irritating. I will improve the readme so that people know that this option is often a good thing.

from lazysizes.

@TrilipuT

While I'm pretty sure, that your bug should be gone now. I would like to have a confirmation from you (not only my demo page, but also inside your project).

from lazysizes.

It's gone in your demo. At my project will check tomorrow morning and give you feedback.
Thanks for great work ;-)

from lazysizes.

@aFarkas - I've closed https://code.google.com/p/chromium/issues/detail?id=431862 since the behavior is as intended. If you'd change sizes in your example, or add resources such that the required resource would be wider than sizes (so its density would be larger than 1), I think the example would work the way you want it to.

Let me know if you have any questions.

from lazysizes.