Force to load all images variante first

Technical Q&A
1

Hello everyone,

I have an product with many color swatch options.

To make a neadless transition between the options, I want to ask, if there is a script I can implement which forces to load all picutres on the product page.

I already saved all pictures as webp to save data.

Thanks everyone!

2

Hi @Antonn ,

Yes! You can force all product images to preload on the product page for smoother color swatch transitions.

Preload via HTML (Add to in theme.liquid)

{%- if template contains 'product' -%}
  {%- for media in product.media -%}
    
    
  {%- endfor -%}
{%- endif -%}
3

Hey @oscprofessional ,

thank you so much for that easy and fast reply.

I already implemented your code and saw the results in the network logs from google.

I still see some loading between pictures transitions, I can rely on that but I really want to make the best out of it :slightly_smiling_face:

The picture url which is pre loading looks different from the request when you chose the picutre.

pre-load request:

Antonn_0-1738927937384.png

reuqest when swatch:

Antonn_1-1738927971757.png

If you need the detail request, let me know.

Thank your for time.

4

Hey again @oscprofessional ,

I deleted the ‘800x800’

Now its working perfectly, thank you so much :slightly_smiling_face:

5

After some reasearch I found out, that the “800x800” is something you need to asign for liquid to chose the quality.
Iam sorry for that mistake, iam still learning.

How ever I generated some code from ai which expands the lazy load for all variants and product media, thats not the best practice but it works for my one product store.

{%- if template contains 'product' -%}
   {%- if product.selected_or_first_available_variant.featured_image -%}
     
   {%- endif -%}

   {%- for media in product.media -%}
     
   {%- endfor -%}
{%- endif -%}

    {%- for variant in product.variants -%}
  {%- if variant.featured_image -%}
    
  {%- endif -%}
{%- endfor -%}

{%- for media in product.media -%}
  {%- if media.media_type == 'image' -%}
    
  {%- endif -%}
{%- endfor -%}

again sorry for the mess ^^

6

I’m confused Antonn, the code you made with AI is empty, it is just conditions with the code doing nothing after each of the conditions.

7

Hi @oscprofesionals , can you please explain your code snippet a bit. It doesn’t show anything happening in the code. What happens in the for loop?

8

Some code snippets (or parts of them) were lost during forum migration to a new platform.
I guess this is the case here.