How can I fix a broken image thumbnail during page load?

Solved

How can I fix a broken image thumbnail during page load?

GiselJewel
Visitor
2 0 1

 

Hi everyone!
I have a problem with my website, giseljewelsoul.com
When I click on a category, before the page fully loads, a broken image thumbnail appears, like this:Immagine 2024-04-25 183610.png

After 1 second image load properly...

 

Immagine 2024-04-25 190154.png
Can I hide that?
Or insert some other colored space?

Accepted Solution (1)

jldt
Tourist
4 1 1

This is an accepted solution.

You probably need to add loading="eager" to the image tag.

If you're using the image_url as an object, here is a reference on how to apply it. Just replace 'lazy' for 'eager'.

https://performance.shopify.com/blogs/blog/lazy-load-images-for-performance

View solution in original post

Replies 3 (3)

jldt
Tourist
4 1 1

This is an accepted solution.

You probably need to add loading="eager" to the image tag.

If you're using the image_url as an object, here is a reference on how to apply it. Just replace 'lazy' for 'eager'.

https://performance.shopify.com/blogs/blog/lazy-load-images-for-performance

GiselJewel
Visitor
2 0 1

I'll try right away, thanks!

jldt
Tourist
4 1 1

No problem!