Solved

Lazy Load attribute is being ignored in Liquid rendering.

noahADD
Shopify Partner
12 2 1

Hello, I'm currently trying to have certain images in the Empire theme load eager, rather than lazy. One such issue is that our logo in the header is marked to load lazy, when I'd rather it load eager by default. 

The liquid to create the logo is the following:

<!-- Load Eager -->
<a href="{{ routes.root_url }}" itemprop="url" class="site-header__logo-link
{% if block.settings.logo-inverted %} logo--has-inverted{% endif %}" style="padding-top: {{ 100 | divided_by: block.settings.logo.aspect_ratio }}%"> 
{{ block.settings.logo | image_url: width: 300 | image_tag: widths: "300,200,150,75", loading: "eager", alt: "COMPANY LOGO DESCRIPTION", class: "siteLogo"}}
</a>

 I even included a comment because I thought I was going crazy with this being the output:

<!-- Load Eager -->
<a href="/" itemprop="url" class="site-header__logo-link" style="padding-top: 29.924242424242426%"> 
    <img src="//STORE.com/cdn/shop/files/LOGO.png?v=1678141443&amp;width=300" alt="COMPANY LOGO DESCRIPTION" srcset="//STORE.com/cdn/shop/files/LOGO.png?v=1678141443&amp;width=300 300w, //STORE.com/cdn/shop/files/LOGO.png?v=1678141443&amp;width=200 200w, //STORE.com/cdn/shop/files/LOGO.png?v=1678141443&amp;width=150 150w, //STORE.com/cdn/shop/files/LOGO.png?v=1678141443&amp;width=75 75w" width="300" height="90" loading="lazy" class="siteLogo">
</a>

(I used placeholders for the URL, but you get the idea)

 

I have no idea why, but no matter what I do, the 'loading' attribute changes to lazy. Even with no attribute, it gets added. I've gone across all scripts on the store and there's nothing modifying attributes. My understanding of Liquid/Ruby is that it would have to change before the server even sent the HTML doc. Debugging didn't help either, as I tried to have the loading break upon attribute modification, but it never changes - it's just always lazy. 

 

This is actually happening to all images on the site, so is anybody else experiencing this issue, or have an idea if maybe an app could be causing this? I'm hoping for some help or suggestions on how I could track down the issue.

Accepted Solution (1)

noahADD
Shopify Partner
12 2 1

This is an accepted solution.

I solved this already. I found a third-party script that had been added by a previous developer that was making these changes! 

View solution in original post

Replies 2 (2)

noahADD
Shopify Partner
12 2 1

This is an accepted solution.

I solved this already. I found a third-party script that had been added by a previous developer that was making these changes! 

usama5
Visitor
1 0 0

hello 

I am having a problem with lazy loading with my product images on the product page of dawn theme

i tried everything to remove lazy loading from product thumbnail image but it always show loading:lazy

Screenshot 2024-04-28 141409.pngScreenshot 2024-04-28 141457.png