How to fix lazy loading issue with product images on my website?

[DAGNORAK]

Hello all, I’ve had an issue when uploading my images to my website with lazy loading

the images show alt text before appearing.
on my home page I’ve fixed this already by removing the lazy loading code in the Multicolumn theme code etc. so they appear fine now but it’s just these product images I can’t seem to find the code where the lazy loading is. I’ll tag a photo of what happens. This only happens for 1-2 seconds once you load the product then it loads successfully but I need the photos to appear instantly. The photos are only around 100Kb anyway so there’s no load on the site. And the site is only small anyway. Any help is appreciated. DAGNORAK.com

[NomtechSolution]

1. Locate the code responsible for lazy loading in your theme. This code could be present in a JavaScript file or within a script tag in your theme’s code.
2. Look for the section of code that targets image elements for lazy loading. It might use a function like lazyLoad() or similar.
3. Identify the part of the code that applies lazy loading specifically to product images. This could involve selecting elements with a specific class, attribute and remove it

[DAGNORAK]

I’ve tried this I just can’t locate it

[made4Uo]

Hi @DAGNORAK

You can change the lazy loading of the product page by following on the instructions below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code

2. Go to Snippet folder and open the product-media-gallery.liquid file

3. Change the lazy_load for both main and thumbnail images, see image below

[nathanhuffhines]

I’m in the Expanse theme and I feel like I’m in the right place, I just can’t figure out how to remove the lazy loaded functionality. I tried replacing img class with “image” and it just breaks stuff.