Repository navigation
Images not showing in Chrome v80 when loading="lazy" #250
Description
In Chrome versions prior to 80 everything works fine. However the images that have attribute loading="lazy" stop showing up. The image tag inside the cl-image component is set to display: none.
Is anyone else having this issue?
My simple code:
<cl-image loading="lazy" public-id="path/to/image" secure="true"></cl-image>
Metadata
Metadata
Assignees
Labels
No labels
Activity
strausr commentedon Feb 16, 2020
@hassanasad we're unable to reproduce this on our end. Can you please provide a sample code where we can see this?
hassanasad commentedon Feb 25, 2020
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.strausr commentedon Feb 25, 2020
@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.
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
hassanasad commentedon Mar 19, 2020
Did you try it on Chrome version => 80 ?
It doesn't work for me. The image just doesn't display because of the
display: nonestyle applied to it.strausr commentedon Mar 20, 2020
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?