Hi Zqdo,
I have the same issue with above the fold lazy loading, and was wondering if you could have a look and suggest something to try.
Here is the link to the website: www.skindevotee.com and below is the code that is parsed.
<img alt="Book a treatment with Skin Devotee Facial Studio in Philadelphia" class="image__img" loading="lazy" width="800" height="1200" src="//skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=320" srcset="//skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=700 700w, //skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=750 750w, //skindevotee.com/cdn/shop/files/book-a-treatment-with-skin-devotee-facial-studio-in-philadelphia-m.jpg?v=1699762922&width=800 800w" sizes="100vw" onload="javascript: this.closest('.image').classList.add('loaded')">
So I searched for this and saw that the only file that calls this exact code is in responsive-image.liquid file.I don't know how to insert the logic you provided in the above posts you mentioned to force the hero-image on the homepage to not lazy load.
Here is the code for the responsive-image.liquid
Thank you
Neil
{%- comment -%}
Pass these variables into snippet:
Required:
* image: Image object
* sizes: srcset size attribute
Optional:
* prioritize_loading: is this image rendered above the fold or otherwise prioritized? this will avoid loading="lazy"
* fallback_width: width shown to browsers that don't support srcSet
* tag_name: render something other than an `img` element, for instance `picture` or `source`
* media: custom media definition for `source`
* aspect_ratio: necessary if the image is displayed at a non natural aspect ratio
* fallback_alt: fall back alt text if non set on image in admin
* src_set_type: optional parameter used to reduce the srcset generation to speed up page perf
- 'grid'
- 'full-width'
- if unset a comprehensive src set range will be used
{%- endcomment -%}
{%- liquid
if tag_name == blank
assign tag_name = "img"
endif
if fallback_width == blank
assign fallback_width = 320
endif
if lazy
assign src_attr = "data-src"
assign src_set_attr = "data-srcset"
else
assign src_attr = "src"
assign src_set_attr = "srcset"
endif
if src_set_type == "grid"
# Assumption: even with a 2-per row grid on large screen, grid item will not be more than 700px @2x wide
assign src_set_widths_raw = "150,200,240,280,300,360,400,450,500,550,600,650,700,750,800,850,900,950,1000,1100,1200,1300,1400"
elsif src_set_type == "full-width"
# Assumption: even smallest phone will be 350px @ 2x = 700 at least
assign src_set_widths_raw = "700,750,800,850,900,950,1000,1100,1200,1300,1400,1500,1600,1800,2000,2200,2400,2600,2800,3000,3500,4000,4500,5000,5500,6000"
else
assign src_set_widths_raw = "100,150,200,240,280,300,360,400,450,500,550,600,650,700,750,800,850,900,950,1000,1100,1200,1300,1400,1500,1600,1800,2000,2200,2400,2600,2800,3000,3500,4000,4500,5000,5500,6000"
endif
assign src_set_widths = src_set_widths_raw | split: ','
assign src_set_string = ""
-%}
{%- liquid
if object_fit != "contain" and aspect_ratio != blank and aspect_ratio != 'natural'
if aspect_ratio == "portrait"
assign crop_height_ratio = 1.5
elsif aspect_ratio == "landscape"
assign crop_height_ratio = 0.666666
elsif aspect_ratio == "square"
assign crop_height_ratio = 1
elsif aspect_ratio == "portrait_alt"
assign crop_height_ratio = 1.25
elsif aspect_ratio == "landscape_alt"
assign crop_height_ratio = 0.8
elsif aspect_ratio == "landscape_wide_alt"
assign crop_height_ratio = 0.5625
endif
endif
assign image_crop = "center"
if focal_alignment != blank and focal_alignment != "center"
assign image_crop = focal_alignment
endif
-%}
{%- for width_string in src_set_widths -%}
{%- assign width = width_string | plus: 0 -%}
{% if image.width < width %}
{% break %}
{% endif %}
{%- if crop_height_ratio and focal_point != "image_presentation" -%}
{%- assign crop_height = width | times : crop_height_ratio -%}
{%- if image.height < crop_height -%}
{% break %}
{%- endif -%}
{%- endif -%}
{%- capture src_set_string -%}
{%- if src_set_string.size > 0 -%}{{ src_set_string }},{{ ' ' }}{%- endif -%}
{%- if crop_height_ratio and focal_point != "image_presentation" -%}
{{ image | image_url: width: width, height: crop_height, crop: image_crop }} {{width}}w
{%- else -%}
{{ image | image_url: width: width }} {{width}}w
{%- endif -%}
{%- endcapture -%}
{%- endfor -%}
{% capture alt %}{% if image.alt.size > 0 %}{{ image.alt }}{% else %}{{ fallback_alt }}{% endif %}{% endcapture %}
<{{ tag_name }}
alt="{{ alt | escape }}"{{ ' ' }}
class="image__img{%- if class_name -%} {{ class_name }}{%- endif -%}"{{ ' ' }}
{% unless prioritize_loading %}loading="lazy"{{ ' ' }}{% endunless %}
width="{{ image.width }}"{{ ' ' }}
height="{{ image.height }}"{{ ' ' }}
{% unless tag_name == "source" %}{{ src_attr }}="{{ image | image_url: width: fallback_width }}"{{ ' ' }}{% endunless %}
{% if media %}media="{{ media }}"{{ ' ' }}{% endif %}
{{ src_set_attr }}="{{ src_set_string }}"{{ ' ' }}
sizes="{{ sizes }}"
onload="javascript: this.closest('.image').classList.add('loaded')"
/>
