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

[bryan76]

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!

[ExpertRookie]

@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

[bryan76]

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]

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 %}

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

[ExpertRookie · 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 -%}

[bryan76]

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

[bryan76]

Worked great!  Thank you!

[OneCommerce]

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

{% else %}

//your image code with lazyload

{% endif %}