Native Lazy load on article images? loading="lazy"

Store Design
1

How can I lazy load articles without doing it manually by only using the native lazy load method?

loading="lazy"
2

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

Regarding your concern about add native lazyload on article image. There are 2 ways for you to achieve it, one is you can do it by yourself manually, or you can install another 3rd app to do that for you

But i recommend you to do it manually because you can control it by your own, the step is really basic and easy to do. You can follow the step below

You need to add the lazy load script and the class for the same.

Here are the steps that you can follow:

Step 1: Add the Lazy Load script to the Shopify store

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 Save.

Step 2: Indicate the images to lazy load

Add the class lazyload to images that should be lazy loaded. In addition, change the src attribute to data-src.

Before

After

Step 3: Instantiate Lazy Load in your JS document

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(); });

Hope this helps.

Best regards,

PageFly

3

thanks for the reply.

but how about just adding native loading=“lazy” instead of using javascript if I will still just do it manually?