kawalcovid19/wargabantuwarga.com

Lazy Loading Not Working

mazipan opened this issue · 4 comments

mazipan commented

Description

It's working on Chrome, but seems not working on My Firefox Developer Edition.

i try to test on web.dev/measure and it also not working:

Expected Behaviour

It should not loaded when we test from web.dev/measure

Additional Information

I already try to deep dive into Next/Image source code, they already use IntersectionObserver see here

kelilipan commented

I think it's from next/image. It's also doesn't work here https://leerob.io/blog/style-guides-component-libraries-design-systems (web.dev/measure report).

Same issue, it's working on my chrome but doesn't work on my Firefox Dev and web.dev/measure .

  • 👀2
mazipan commented

Do we need to wrap it inside our own IntersectionObserver?
But it might cause a layout shifting if we are not good in setting a correct high value.
Maybe try for the image on the very bottom of the page first.

We already have custom hooks useIntersectionOberserver, just in case if someone interest to try this out.

kelilipan commented

I think it's working now, since #790

EzdmAqSn8P.mp4

Before (https://deploy-preview-788--wargabantuwarga.netlify.app/):

gDIqDYwQLy.mp4
resir014 commented

Thank you @svspicious! I think it's safe to close this now. @kawalcovid19/wbw

  • 👍1