How to lazy load this image?

Solved
Highlighted
Tourist
11 0 1

How would i go about lazyloading this image - what do i add to this code?

 

Have added the class - lazyload which will work if the data-scr was in play? via the lazyload.js file.

but i dont how to wirte the string for data-scr with this string currently?

 

{% if block.settings.image != blank %}
{{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image lazyload' }}
{% else %}

0 Likes
Highlighted
Shopify Expert
2684 67 778

You'd need to compose the  img tag yourself and instead of src use dat-src, like so:

{% if block.settings.image != blank %}
  <img data-src="{{ block.settings.image | img_url: '160x160', scale: 2 }}" alt="{{ block.settings.image.alt}} class="logo-bar__image lazyload">
{% else %}

this does not do auto-sizing, but for this kind of image you may probably skip it.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Shopify Expert
1381 111 200
Highlighted
Tourist
11 0 1

Thanks, it seems not to be recognising the images now, just putting in placeholders...  this is a liquid file, does that make any difference?

 

logos-fix.jpg

 

0 Likes
Highlighted
Shopify Expert
2684 67 778

Can you share a preview link?

Does theme include lazy loading library?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Tourist
11 0 1

Well website is https://sundriftstore.com/ - the logos are at the bottom and yes the theme "debut" includes the lazy loading..


@tim wrote:

Can you share a preview link?

Does theme include lazy loading library?


 

0 Likes
Highlighted
Shopify Expert
2684 67 778

This is an accepted solution.

You're loading lazysizes two times:

<script src="//cdn.shopify.com/s/files/1/0029/5685/3283/t/10/assets/lazysizes.js?1381" async="async"></script>
<script src="//cdn.shopify.com/s/files/1/0029/5685/3283/t/10/assets/lazysizes.min.js?1381" async></script>

first file includes all necessary scripts, version 3.0.0, 

second includes only base component, but version 4.1.1

I guess removing the second file will fix it.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
Tourist
11 0 1

further to this lazyload of images, now attempting to do on background slideshow..

 

<div
class="slideshow__image box ratio-container lazyload {% unless forloop.first %} lazypreload{% endunless %} js"
data-srcset="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="contain"
style="background-position: {{ block.settings.alignment }};
bg-scset: url('{{ block.settings.image | img_url: '300x300' }}');">
{% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}

</div>

0 Likes
Highlighted
Shopify Expert
2684 67 778

Wasn't it already in place?

 

For background image you do not need to specify either data-srcdata-srcset (and I have no idea what's bg-scset). 

You may check the hero section for an example of bgset usage.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Tourist
11 0 1

for some reason - pagespeed keeps flagging it..  

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fsundriftstore.com%2F

 

So i will try..what is does on the hero image..

0 Likes