Lazyloading on homepage

Highlighted
Tourist
28 0 0

I'm trying to integrate lazy loading on my website.

I downloaded Lazysizes.min.js from here and added the script right at the end of the <head> tag, like this:

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

 

I can't figure out how to specify the images loaded in the homepage should become with class lazy load, since the images are generated by a "section" of the theme. 

I figured that I should specify it, but I don't know how to specify it, I've seen this code, but couldn't figure where to put it:

{% assign img_url = image_object | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="lazyload fade-in"
 src="{{ image_object | img_url: '300x' }}"
 data-src="{{ img_url }}"
 data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048]"
 data-aspectratio="{{ image_object.aspect_ratio }}"
 data-sizes="auto"
 data-parent-fit="contain"
 alt="{{ image_object.alt | escape }}">

 

 

My website is here

0 Likes
Highlighted
Explorer
112 1 9

Hi, MorganPub this is Syed Mustafa I am a Professional Shopify Developer I've gone through your website speed details and your website is too much slow just because there are lots of unused code of Javascript and CSS plus it has lots of unoptimized images that's why your website loading speed time is more than 15 seconds and slow speed means that you are losing your customers and profit so it's a work that can be done by custom coding and I am professionally able to do this for you but it will be a one time paid service with lifetime technical support so if interested kindly do let me know at Syedmustafanadeem99@gmail.com. Thanks & Regards 

speed.png

0 Likes
Highlighted

You should find the file that renders the product images in your homepage. Usually it's a snippet named something like "product-card.liquid", but it can vary depending on your theme. 

When you find this snippet, find the images tag, replace the "src" attribute with "data-src" and add the class "lazyload".

Just to illustrate: <img src="/image.png"> would become <img class="lazyload" data-src="/image.png">

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
1 Like
Highlighted
Tourist
28 0 0

@MaxDesign  I think I found it, the name is product-grid-item.liquid in my case. what is weird is the code tho, a bit different

 

Original source: 

<img  src="{{ product.images.last | product_img_url: img_size }}" class="hidden-feature_img" alt="{{ product.images.last.alt | escape }}" />

 

If I follow what you're saying, I should change it in:

<img  data-src="{{ product.images.last | product_img_url: img_size }}" class="hidden-feature_img lazyload" alt="{{ product.images.last.alt | escape }}" />

 

right? 

0 Likes