Lazy Load your Gallery

Posted on

When do you need Lazy Load?

There are certain cases but all these cases has one thing common – your customer will have to scroll to view the gallery.

  • Your Gallery is in Footer
  • Your Gallery is in Middle of the Page
  • You have more than one Gallery so enable Lazy load in all but first.
  • Your Gallery is in Product Description (Makes it in middle of the Page)

When to AVOID lazy Load

  • There is only one Gallery in the page and no other content.
  • When your Gallery is in the top part of your Page

You can take the advantage of this situation by loading the images only when your customer is about to reach the point where gallery is embedded. Doing it is very easy.

How to Enable Lazy Load?

Usually, we have embed codes like this:

<div class="cz-embed-gallery" id="cz-embed-galleryXXX"></div>

For Lazy Load, simply add one more class cozy-gallery-lazy-load

<div class="cozy-gallery-lazy-load cz-embed-gallery" id="cz-embed-galleryXXX"></div>

Where XXX is unique identity of your Gallery.

Demo

We have used Lazy Load in our Cozy Image Multiple Gallery