Lazysizes: slow loading when scrolling on wheel (Chrome/Opera)

[Youfka]

When I scroll a page by mouse wheel, images loading with delay about 3sec. But when I drag scroll bar images loading instantly. This problem is in chrome and opera, in firefox is ok.

[aFarkas]

I can not reproduce this. Can you please show a test case that proves this?

[Youfka]

I sent you an email with example
btw on demo page https://afarkas.github.io/lazysizes/index.html
when I click to add new elements, it's loading with delay too, when I scroll with wheel

[aFarkas]

There are two reasons for this related to some Chromium scroll improvements. 1. Chrome delays decoding images while doing smooth scroll. 2. Newer Chrome versions do throttle requestIdleCallback more while scroll.

You wouldn't experience such problems, if you wouldn't have changed the expand option in the first place.

lazysizes is the only lazy loader with a dynamic treatment of the expand option (which means the expand is only used if the network is in idle state). I really can't understand people setting it to 0.

[Youfka]

I set expand to default, but images still loading differently when I scroll with wheel and drag scroll bar

[aFarkas]

Can you try the following file instead of lazysizes:
https://gist.github.com/aFarkas/d4f1e48d90d9fb6a1aa07e43f43af438

[Youfka]

feels like it's getting faster in Opera, but I don't see the difference in Chrome

[aFarkas]

There is no fundamental difference between Opera and Chrome.

[Youfka]

I think it's something with webkit browsers, demo page is still loading with delay in Opera and Chrome, but in Firefox is fast

[aFarkas]

I haven't changed anything on the demo page. You can set the new ricTimeout to 50 and leave the expand as it is to fix your issue.

[judbd]

Hi, I'm having the exact same problem : lazysize is very fast in firefox, but sometimes I have to wait for the script 2-3 seconds when I scroll with the wheel in chrome (no problem with scrollbar). Same with finger scrolling on chrome android.

[aFarkas]

@judbd
Have you tried to lower the ricTimeout to 0-50? Does this change anything for you.

[judbd]

I just tried

<script>
window.lazySizesConfig.ricTimeout = 50;
</script>

and

<script>
window.lazySizesConfig.ricTimeout = '50';
</script>

Don't know what is the good syntax. I put it just before loading the lazysize script as said in doc but it change nothing. Images load 2-3 sec after a mousewheel scroll, even if there were in browser cache, but all work as intended the second I click on the scrollbar (without even moving it). It's like the JS is temporized at mousewheel scroll only on chrome.

You can see an exemple here : https://judbd.com/portfolio (I let the lazyload active for a Day so you can see)

[aFarkas]

@judbd
I'm on vacation and can only check with trackpad on my mac (which should be similar as wheel (technically the wheel "software path" is used with trackpad). I can not really reproduce your problem, but I can not see my suggested fix either (50 is the right way):

<script>
window.lazySizesConfig.ricTimeout = 50;
</script>

Can you re-check your configuration. (Or describe where I can find the customized configuration)?

Also: Is this a chrome win/chrome mac problem?

[judbd]

Thank you @aFarkas , there is no rush. It's Chrome PC and Mac (a friend tells me it was the same on his mac). Sorry for the fix, It have a cache problem, I fixed it but now I have this error : Uncaught TypeError: Cannot set property 'ricTimeout' of undefined

The Image still load immediatly when I click on the scrollbar, but not with mousewheel.

[judbd]

Ok I have fixed the init problem (sorry I'm not a developer :) ) The problem is still here. No problem with scrollbar but when mousewheel is used, there is some delay. I made a gif.

as you can see, there is delay at scroll, but the instant I touch the scrollbar, the lazyload is unblocked and the image charged instantly (images are in cache, le lazyload not loading is the only thing that prevent the image display)

[franklinjavier]

@aFarkas I got this issues too. I made a mp4

My config

lazySizesConfig.ricTimeout = 50;
lazySizes.init();

[aFarkas]

@franklinjavier
Can you please remove lazysizes and try the following script:
https://gist.github.com/aFarkas/f3ae9f7f9c40169851ebb0307d9c3e67

Another thing: To test it it might make sense to add a border and stlye it differently on .lazyloading, .lazyloaded this way you see at which time lazysizes does kick in without the additional network timing.

[franklinjavier]

@aFarkas sorry for the delay. It is hard to explain, but one of our script is causing this strange behaviour. If I not request this script, works as expected.
This technique of .lazyloading gave me this insight. Thanks

[aFarkas]

@franklinjavier
This is a good information. Can you point me to what script it is, so I can know for other devs having this issue?

[davefmoore]

I'm experiencing the same issue that @franklinjavier posted in his video. The application this is used in is digital asset mgmt software which is notorious for showing a ton of images on the page... +2k in infinite scroll... which lazysizes or not, is bad for performance as we don't do virtual repeats or anything. I will follow the steps above and report back if this solves these issues.

[IanLunn]

I am having this issue too. I believe it is due to external third-party scripts blocking rendering of any other JavaScript on the page whilst they load. It's not so much an issue with lazysizes but instead a case of better managing assets on the page and loading scripts via defer or async methods where possible.

[IanLunn]

To add to what I said above, async or defering JavaScript might allow the DOM to load before the JavaScript does, but this doesn't solve the problem. As images are loaded as and when needed, you might find that external JavaScript is loading at the same time as trying to add the lazyloaded image to the DOM, and as such, there is a delay adding the image until the script has loaded.

[cshold]

Same issue here. Have also narrowed it down to requestIdleCallback's scroll throttling in Chrome only, which causes lazysizes and other scripts from being completely blocked. Most in depth writeup of this I've found is in an issue in react-native-web.

In Nov 2016 there's a quote in this issue that says:

As long as lazysizes doesn't find any images to transform. It takes about 0.5-2ms to search for those elements throtteled by a combination of requestIdleCallback and setTimeout. (Maximum frequency 1 "search" per 125ms, but only if rIC is called.).

I tried stripping out the animations on our images and it does seem to lower the scroll throttle issue. @aFarkas are you able to shed light on your quote above?

[aFarkas]

@cshold

This is a chrome bug. I just made some code changes to lazysizes to not really use rIC anymore. (I haven't yet released this version.) I will enable it as soon as this bug is fixed:
https://bugs.chromium.org/p/chromium/issues/detail?id=822269

[cshold]

Are you able to share the version of it without rIC? Those Chrome bugs don't get addressed all that quickly I find. Happy to test it out.

[aFarkas]

@cshold
I just released it.

[ciases]

So, it there any solution to this problem? I've got this issue with lazysizes v.4.0.2 and Chrome 65

[rainerbird]

Am also still experiencing this issue after updating to 4.0.2 - with Chrome 66

[dexterbg]

Same issue with Chrome 67.0.3396.87 (Android) & v4.0.3, three seconds delay after scroll stop until images load.