Images not showing in Chrome v80 when loading="lazy"

[hassanasad]

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>

[strausr]

@hassanasad we're unable to reproduce this on our end. Can you please provide a sample code where we can see this?

[hassanasad]

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]

@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

[hassanasad]

Did you try it on Chrome version => 80 ? It doesn't work for me. The image just doesn't display because of the display: none style applied to it.

[strausr]

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?