Lazy loading on Dawn theme

Solved
tobychen
Tourist
5 0 1

Hi,

 

I see that new released Dawn theme didn't include lazysizes plugin for lazy loading of the images. The Debut theme has had it.

This is the code I see from main-collection-banner.liquid.

 

<img srcset="{%- if collection.image.width >= 165 -%}{{ collection.image | img_url: '165x' }} 165w,{%- endif -%}
          {%- if collection.image.width >= 360 -%}{{ collection.image | img_url: '360x' }} 360w,{%- endif -%}
          {%- if collection.image.width >= 535 -%}{{ collection.image | img_url: '535x' }} 535w,{%- endif -%}
          {%- if collection.image.width >= 720 -%}{{ collection.image | img_url: '720x' }} 720w,{%- endif -%}
          {%- if collection.image.width >= 940 -%}{{ collection.image | img_url: '940x' }} 940w,{%- endif -%}
          {%- if collection.image.width >= 1070 -%}{{ collection.image | img_url: '1070x' }} 1070w{%- endif -%}"
          src="{{ collection.image | img_url: '533x' }}"
          sizes="(min-width: 1100px) 535px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
          alt="{{ collection.title | escape }}"
          loading="lazy"
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
>

 

Does new theme support lazy loading automatically by using attribute loading="lazy" If not, do I have to include lazysizes manually?

Amarjyoti
Tourist
20 7 12

This is an accepted solution.

Hey @tobychen,

The Dawn theme uses browser-level lazy loading and it doesn't require any additional plugins. You can read more about Browser level lazy loading from here.

Thanks!!

Amarjyoti | I'm here to help and share some insights. Not looking for work.
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution