Product page images blurry on initial page load

[ben_langly]

We're experiencing blurry product images on inital page load.  Problem is resolved when user refreshes page.  But that doesn't mitigate the poor initial experience.

Any thoughts / ideas on what is causing this and how it may be resolved?

Blurry image on page load example:

Refresh the page and images nice an crisp example:

e.g. https://www.langly.co/products/simple-camera-back-pack?variant=22095565636 

Cheers.

[LitExtension]

Hi @ben_langly,

I checked and error due to lazyload of product image. You just need to remove lazyload, it will work fine.
Please send me the code of sections/product-template.liquid file. I will check and guide it for you.

[ben_langly]

Hi @LitExtension thanks for your thoughts on this.  I've attached an extract of the code in a txt file.

Regards, Ben.

[LitExtension]

Hi @ben_langly,

It has already been rendered to the product file so can you send me more code of snippets/product.liquid .

I will check it.

[ben_langly]

Hi @LitExtension find attached, hopefully this is what you need.  Cheers, Ben.

[LitExtension]

Hi @ben_langly,

Sorry, it still goes to a file named: 'media-grid'. https://i.imgur.com/d9i7h0r.png

So can you send me more code of snippets/media-grid.liquid

I will check it.

[ben_langly]

Sure thing, please find attached.  Cheers.

[LitExtension]

Hi @ben_langly,

Please change the code: https://i.imgur.com/q0DPX0o.png 

Code:

<img class="{{ image_gallery_class }} "
					src="{{ media | img_url: image_zoom_size }}"
					{% if image_gallery == 'lightbox' %}
						data-lightbox
						{% if main_slide %}
							data-mfp-src="{{ media | img_url: image_zoom_size }}"
						{% endif %}
					{% elsif image_gallery == 'zoom' %}
						data-zoom="{{ media | img_url: image_zoom_size }}"
						{% if main_slide %}
							data-lightbox-mb
							data-mfp-src="{{ media | img_url: image_zoom_size }}"
						{% endif %}
					{% endif %}
					alt="{{ media.alt | escape }}">

Hope it helps!

[ben_langly]

@LitExtension 

Thanks for sharing, have replaced the code in a test theme, this fixes the blurry image issue but the add to cart function on the product page doesn't seem to be working in the test theme now.

Video recording here https://watch.screencastify.com/v/JOaG3iFu4RKogylb9jjy

Preview link here https://i0x58ucipxm8hlnc-1503760.shopifypreview.com version langly/feature/v1.4-nav-and-video (image fix)

Regards, Ben.

[LitExtension]

Hi @ben_langly,

I checked and add to cart may be broken by klaviyo app, you can turn it off and check again.

And code image doesn't affect add to cart, just hope you are clear on this.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.