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. – Rizwan Khan Aug 26 at 6:26
  • @RizwanKhan I am not using any kind of extension – Nafisa Aug 26 at 6:33
  • how you have using lazyloading on category image and there products? – Rizwan Khan Aug 26 at 6:47
  • @RizwanKhan I want to do that. that's what i am asking, how to do that\ – Nafisa Aug 26 at 7:07

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 – Nafisa Aug 26 at 10:18
  • maybe this can help: medium.com/@filipvitas/… – Rizwan Khan Aug 26 at 10:21
  • I dont want to lazy load images. I want to lazy load an either div element – Nafisa Aug 26 at 10:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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