How can I implement lazy load for a section image?

Store Design
1

Hi,

is there a way of making the image of the section I created lazy load? The speed of the page is slow and want to speed it up.

Code below:


{{ section.settings.image_1 | img_url: '2048x' | img_tag }}

    
{% schema %}
{
  "name": "Image",
  "settings": [
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "Image"    
    },            
	{
    "type": "url",
    "id": "image_link",
    "label": "Image link"
    }
  ],
  "presets": [
    {
      "name": "Image",
      "category": "Content"
    }
  ]
}

{% endschema %}

Website here:

https://apm-hk.myshopify.com/?_ab=0&_fd=0&_sc=1&key=a68d1219326d6dee508d3cbd2479c62e6fe01ea1fe0ad79db86bb94b1cbddb27

Thanks

2

@JKIRK
How to make lazy load images?

Step-1:

  • From your Shopify admin, go to Online Store > Themes.
  • Find the theme you want to edit, and then click Actions > Edit code.
  • In the Layouts directory, click themes.liquid to open it in the online code editor.

In the online code editor, add the below code before close tag.

{{ '//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js' | script_tag }}
  • Click on Save.

Step-2:

Step-3:

Add the below Javascript code to your .js or .js.liquid file in the Assets directory and you are done.

$(document).ready(function(){$("img.lazyload").lazyload();});
3

@Zworthkey

Thanks! Where do I add step 2?

1 Like
4

Where you want to Show image add their