Remove Lazy Load From First Image of Slideshow Only - Dawn Theme

Solved
bryan76
Pathfinder
121 2 20

I can see where the code is to delete Lazy Loading in slideshow.liquid but this removes Lazy Loading all 3 slides and in turn hurts my site speed.  I would like to remove Lazy Loading on the first image only and let the next two load slowly.   Anyone have an idea on how to accomplish this?

 

Thanks in Advance!

Accepted Solution (1)
ExpertRookie
Shopify Partner
1517 248 288

This is an accepted solution.

@bryan76 

Please try this code

{%- if block.settings.image -%}
<img
srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
{%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
{%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
{%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
sizes="100vw"
src="{{ block.settings.image | image_url: width: 1500 }}"
{% if forloop.first == false %} 
	loading="lazy"
{%- endif -%}
alt="{{ block.settings.image.alt | escape }}"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
>
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

Replies 7 (7)
ExpertRookie
Shopify Partner
1517 248 288

@bryan76 

Please try this code. Search for "{%- if block.settings.image -%}" ... "{%- endif -%}" in sections > slideshow.liquid and replace by this code. Remember to make a backup before making any changes

          {%- if block.settings.image -%}
            {%- assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round -%}
            {% if forloop.first %} 
              {{ block.settings.image | image_url: width: 3840 | image_tag:
                height: height,
                sizes: "100vw",
                widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
              }}
            {%- else -%}
              {{ block.settings.image | image_url: width: 3840 | image_tag:
                loading: 'lazy',
                height: height,
                sizes: "100vw",
                widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
              }}
            {%- endif -%}
          {%- else -%}
            {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
          {%- endif -%}

 try it and let me know

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
bryan76
Pathfinder
121 2 20

thanks.  haven't tried it yet since my current code looks like this:

{%- if block.settings.image -%}
<img
srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
{%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
{%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
{%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
sizes="100vw"
src="{{ block.settings.image | image_url: width: 1500 }}"
loading="lazy"
alt="{{ block.settings.image.alt | escape }}"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
>
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}

 

your code would remove all the: {%- if block.settings.image.width          

 

should I make some adjustments?

Cedcommerce
Shopify Expert
676 72 103

Hello @bryan76,

 

We hope you are doing well. 

 

This can be easily done with a custom code. 

 

You can use the “forloop” condition in liquid code to fix a situation like this:

 

{% if forloop.first %}

 your image code without lazyload

{% else %}

 your image code with lazyload

{% endif %}

 

Cedcommerce_0-1667217645753.png

 

image.png

 

You can check the below documentation for more information.

 

https://shopify.dev/api/liquid/objects/forloop

 

Hope it resolves your issue. Let us know if you need any further help. 

 

All the best, 

CedCommerce

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
ExpertRookie
Shopify Partner
1517 248 288

This is an accepted solution.

@bryan76 

Please try this code

{%- if block.settings.image -%}
<img
srcset="{%- if block.settings.image.width >= 375 -%}{{ block.settings.image | image_url: width: 375 }} 375w,{%- endif -%}
{%- if block.settings.image.width >= 550 -%}{{ block.settings.image | image_url: width: 550 }} 550w,{%- endif -%}
{%- if block.settings.image.width >= 750 -%}{{ block.settings.image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if block.settings.image.width >= 1100 -%}{{ block.settings.image | image_url: width: 1100 }} 1100w,{%- endif -%}
{%- if block.settings.image.width >= 1500 -%}{{ block.settings.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if block.settings.image.width >= 1780 -%}{{ block.settings.image | image_url: width: 1780 }} 1780w,{%- endif -%}
{%- if block.settings.image.width >= 2000 -%}{{ block.settings.image | image_url: width: 2000 }} 2000w,{%- endif -%}
{%- if block.settings.image.width >= 3000 -%}{{ block.settings.image | image_url: width: 3000 }} 3000w,{%- endif -%}
{%- if block.settings.image.width >= 3840 -%}{{ block.settings.image | image_url: width: 3840 }} 3840w,{%- endif -%}
{{ block.settings.image | image_url }} {{ block.settings.image.width }}w"
sizes="100vw"
src="{{ block.settings.image | image_url: width: 1500 }}"
{% if forloop.first == false %} 
	loading="lazy"
{%- endif -%}
alt="{{ block.settings.image.alt | escape }}"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round }}"
>
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
bryan76
Pathfinder
121 2 20

I will.  Thank you.   I will let you know if it works

bryan76
Pathfinder
121 2 20

Worked great!  Thank you!

OneCommerce
Shopify Partner
252 19 91

Hi there,
You can use the code below
{% if forloop.index == 1 %}
//your image code without lazyload

{% else %}

//your image code with lazyload

{% endif %}

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us