Repository navigation
Images not showing in Chrome v80 when loading="lazy" #250
Description
Activity
@hassanasad we're unable to reproduce this on our end. Can you please provide a sample code where we can see this?
I have provided a simple code example above. Can you please make sure you flush browser cache and then try. In Chrome browser, the images stop showing up with
loading="lazy"attribute. I have tested this on three computers, one running Mac and two on Windows.@hassanasad is that snippet the only thing on your page? when using lazy loading on chrome the threshold of the viewport is quite large.
Using your snippet with the following yields a lazy-loaded resource.
<h3 style="height: 4000px">DEMO</h3> cl-image loading="lazy" public-id="path/to/image" secure="true"></cl-image>You can find more information on the threshold on the following- https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/frame/settings.json5?l=971-1003&rcl=e8f3cf0bbe085fee0d1b468e84395aad3ebb2cad
Did you try it on Chrome version => 80 ?
It doesn't work for me. The image just doesn't display because of thedisplay: nonestyle applied to it.The images are loading for me on chrome 80. Here's a sample that's using both lazy load and the placeholder component you can use as a reference- https://codesandbox.io/s/nice-mahavira-qt46g
If you're still experiencing issues can you please share a sample on codesandbox or stackblitz where you recreate the issue?
In Chrome versions prior to 80 everything works fine. However the images that have attribute
loading="lazy"stop showing up. The image tag inside thecl-imagecomponent is set todisplay: none.Is anyone else having this issue?
My simple code: