VENTURE THEME - How to Lazyload offscreen/hidden images?

Solved
Michal_Morek
Shopify Partner
821 72 135

Hi @GentMen

Hope you're having a great day!

We have two ways to do lazy loading: There is a Shopify application that you could use or edit the code of your website. If you are ready, I can help you step by step to fix your issue.

If you have any further questions, please do reach out either here on the forum, or via private message/email.

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
0 Likes
Michal_Morek
Shopify Partner
821 72 135

This is an accepted solution.

Hi @GentMen 

In case you want to edit the code of your website to enable lazy loading :

  1. Download lazy loading lib
    Download this script file.
  2. Create a new asset: lazysizes.min.js and Copy and paste the downloaded script file content into the created file.
    656650_928568.jpg
  3. Integrate the script into theme.liquid, before the closing </head> tag, by adding the following code:

 

 

 

<script src="{{ 'lazysizes.min.js' | asset_url }}" async="async"></script>

 

 

 

  • To initialize lazy loading, you just need to add the lazyload class to your images and change the src attribute to data-src.
    Example : 

 

 

 

<img src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img" style="max-width: {{ height }}px;">

 

 

 


become: 

 

 

 

<img data-src="{{ featured_image | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_image.alt }}" id="FeaturedImage-{{ section.id }}" class="lazyload product-featured-img" style="max-width: {{ height }}px;">​

 

If you have any further questions, please do reach out either here on the forum, or via private message/email.

 

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
0 Likes
GentMen
Excursionist
35 0 7

Thanks. 

It was needed to be done through -npm Install with the help of a developer for anyone that was interested in the subject.

0 Likes
Michal_Morek
Shopify Partner
821 72 135

Hi @GentMen 

You are welcome. I'm glad you were satisfied.

If you have any further questions, please do reach out either here on the forum, or via private message/email.

Founder of Shopify agency - Accomplishify.com
If you would like to hire us as Shopify experts, please reach out via:
  • Email michal.morek@accomplishify.com
  • WhatsApp +48 507 613 425
0 Likes