Grey flashing boxes before image loading (FOUC?)

Store Design
, , ,

Topic summary

Goal: Replicate the grey placeholder boxes that appear before images load on a reference product page to create a smoother, staged load experience.

Key points:

  • Several replies identify the effect as Lazy Loading (deferring image loading to reduce initial page weight). They note most Shopify themes support it, or apps can add it.
  • The original poster (OP) clarifies their store already uses lazy loading but does not show the same grey placeholders/flash behavior as the reference site. They ask responders to review the provided URLs.

References central to the discussion:

Context/terms:

  • Lazy Loading: delays loading images until needed (e.g., when entering the viewport) to improve performance.
  • FOUC (in title): Flash of Unstyled Content; mentioned as a possible related concept, but replies focus on lazy loading.

Status: Unresolved. OP seeks specifics on how to achieve the grey placeholders beyond generic lazy loading advice.

Summarized with AI on January 12. AI used: gpt-5.
1

Hey there,

I’ve noticed on this reference site, they having these grey flashing boxes in place of the images before they load, and it allows all of the other html to load before hand, and seemingly, all the images to load at the same time shortly after in a very smooth way.

I was wondering how I can achieve this as well with my store.
They also have a block of text behind it as well, and from what I can tell, a simple grey box behind that.

I really like this technique and want to replicate it.

Here is the site I’m referring too:

https://hismileteeth.com/products/colour-corrector

Thank you in advance for any assistance.

2

It is lazy load function for images.

3

Hi @Project_ATLAS ,

That is the Lazy Loading feature. They are used to split load resources at the same time to help reduce the load to avoid loading too many website resources at the same time.

You can apply this technology to your website if there are too many images and videos loading at the same time.

Most themes also support this feature. You can customize them in the theme or download the app on Shopify Store.

4

But all of my images already are lazily loaded, and they don’t do this at all.
Did you check out the reference site at all to see what I was describing in terms of their behaviour?

https://hismileteeth.com/products/colour-corrector

You can also view my site here if you want to inspect it:

https://magicbrushco.com/products/t2-starter-kit

5

Hi Dan,

Thank you for your response.

From what I can see, all of my images already are lazily loaded, and they don’t display this behaviour at all. Did you take a look at the reference site at all?

https://hismileteeth.com/products/colour-corrector

You can also view my site here if you want to inspect it:

https://magicbrushco.com/products/t2-starter-kit