I want to implement slow loading for my homepage.

My homepage consist of category image then 9 products related to that category.This continues for all categories. For that, I want to implement lazy loading. first by default one category and there products are displayed after that, rest category image and there products are displayed through lazy loading.

I want to know how can I implement lazy loading for this

  • You are already using the lazyloading extension you need to add a classname .lazy or the classname which you lazyloading extension is using, to all your images of listing on the home page and other section images. Aug 26, 2019 at 6:26
  • @RizwanKhan I am not using any kind of extension
    – Nafsss
    Aug 26, 2019 at 6:33
  • how you have using lazyloading on category image and there products? Aug 26, 2019 at 6:47
  • @RizwanKhan I want to do that. that's what i am asking, how to do that\
    – Nafsss
    Aug 26, 2019 at 7:07

1 Answer 1


You can use this free extension.

By default it will automatically be applied on category and product view page, to apply on custom pages or home page you need to perform below steps:

  1. Add the html class lazy to the img element.
  2. Add the html data-original attribute with the path to the image.
  3. Add a loader image in src attribute which will be displayed before the image loads.

Example img tag:

<img class=“lazy” src=“path/to/loader-image/loading.gif” data-original=“path/to/image/image.jpg” alt=“” />
  • any option other than plugin. I want to write javascript code
    – Nafsss
    Aug 26, 2019 at 10:18
  • maybe this can help: medium.com/@filipvitas/… Aug 26, 2019 at 10:21
  • I dont want to lazy load images. I want to lazy load an either div element
    – Nafsss
    Aug 26, 2019 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.