Canvas Support

Lazy Loading

2 replies · opened May 16, 2021

MMaximM777May 16, 2021

Is it possible to do Lazy Loading for all this code, or Lazy Loading only for images?
[ch_pre]<!-- Shop
============================================= -->
<div id="shop" class="shop row grid-container gutter-30" data-layout="fitRows">

					&lt;div class="product col-12 col-sm-6 col-lg-12"&gt;
						&lt;div class="grid-inner row no-gutters"&gt;
							&lt;div class="product-image col-lg-4 col-xl-3"&gt;

attachment

								&lt;div class="sale-flash badge badge-secondary p-2"&gt;Out of Stock&lt;/div&gt;
								&lt;div class="bg-overlay"&gt;
									&lt;div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400"&gt;
									&lt;/div&gt;
									&lt;div class="bg-overlay-bg bg-transparent"&gt;&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
							&lt;div class="product-desc col-lg-8 col-xl-9 px-lg-5 pt-lg-0"&gt;
								&lt;div class="product-title"&gt;&lt;h3&gt;Checked Short Dress&lt;/h3&gt;&lt;/div&gt;
								&lt;div class="product-price"&gt;$24.99 $12.49&lt;/div&gt;
								&lt;div class="product-rating"&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star-half-full"&gt;&lt;/i&gt;
								&lt;/div&gt;

								&lt;p class="mt-3 d-none d-lg-block"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!&lt;/p&gt;
								&lt;ul class="iconlist d-none d-xl-block mt-md-3"&gt;

  • <i class="icon-caret-right"></i> Dynamic Color Options

  • <i class="icon-caret-right"></i> Lots of Size Options

  • <i class="icon-caret-right"></i> Delivered in 3-5 Days

  • <i class="icon-caret-right"></i> 30-Day Return Policy

                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;

                  &lt;div class="product col-12 col-sm-6 col-lg-12"&gt;
                      &lt;div class="grid-inner row no-gutters"&gt;
                          &lt;div class="product-image col-lg-4 col-xl-3"&gt;

attachment

								&lt;div class="bg-overlay"&gt;
									&lt;div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400"&gt;
									&lt;/div&gt;
									&lt;div class="bg-overlay-bg bg-transparent"&gt;&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
							&lt;div class="product-desc col-lg-8 col-xl-9 px-lg-5 pt-lg-0"&gt;
								&lt;div class="product-title"&gt;&lt;h3&gt;Checked Short Dress&lt;/h3&gt;&lt;/div&gt;
								&lt;div class="product-price"&gt;$24.99 $12.49&lt;/div&gt;
								&lt;div class="product-rating"&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star-half-full"&gt;&lt;/i&gt;
								&lt;/div&gt;

								&lt;p class="mt-3 d-none d-lg-block"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!&lt;/p&gt;
								&lt;ul class="iconlist d-none d-xl-block mt-md-3"&gt;

  • <i class="icon-caret-right"></i> Dynamic Color Options

  • <i class="icon-caret-right"></i> Lots of Size Options

  • <i class="icon-caret-right"></i> Delivered in 3-5 Days

  • <i class="icon-caret-right"></i> 30-Day Return Policy

                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;

                  &lt;div class="product col-12 col-sm-6 col-lg-12"&gt;
                      &lt;div class="grid-inner row no-gutters"&gt;
                          &lt;div class="product-image col-lg-4 col-xl-3"&gt;

attachment

								&lt;div class="bg-overlay"&gt;
									&lt;div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400"&gt;
									&lt;/div&gt;
									&lt;div class="bg-overlay-bg bg-transparent"&gt;&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
							&lt;div class="product-desc col-lg-8 col-xl-9 px-lg-5 pt-lg-0"&gt;
								&lt;div class="product-title"&gt;&lt;h3&gt;Checked Short Dress&lt;/h3&gt;&lt;/div&gt;
								&lt;div class="product-price"&gt;$24.99 $12.49&lt;/div&gt;
								&lt;div class="product-rating"&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star-half-full"&gt;&lt;/i&gt;
								&lt;/div&gt;

								&lt;p class="mt-3 d-none d-lg-block"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!&lt;/p&gt;
								&lt;ul class="iconlist d-none d-xl-block mt-md-3"&gt;

  • <i class="icon-caret-right"></i> Dynamic Color Options

  • <i class="icon-caret-right"></i> Lots of Size Options

  • <i class="icon-caret-right"></i> Delivered in 3-5 Days

  • <i class="icon-caret-right"></i> 30-Day Return Policy

                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="product col-12 col-sm-6 col-lg-12"&gt;
                      &lt;div class="grid-inner row no-gutters"&gt;
                          &lt;div class="product-image col-lg-4 col-xl-3"&gt;

attachment

								&lt;div class="bg-overlay"&gt;
									&lt;div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400"&gt;
									&lt;/div&gt;
									&lt;div class="bg-overlay-bg bg-transparent"&gt;&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
							&lt;div class="product-desc col-lg-8 col-xl-9 px-lg-5 pt-lg-0"&gt;
								&lt;div class="product-title"&gt;&lt;h3&gt;Checked Short Dress&lt;/h3&gt;&lt;/div&gt;
								&lt;div class="product-price"&gt;$24.99 $12.49&lt;/div&gt;
								&lt;div class="product-rating"&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star-half-full"&gt;&lt;/i&gt;
								&lt;/div&gt;

								&lt;p class="mt-3 d-none d-lg-block"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!&lt;/p&gt;
								&lt;ul class="iconlist d-none d-xl-block mt-md-3"&gt;

  • <i class="icon-caret-right"></i> Dynamic Color Options

  • <i class="icon-caret-right"></i> Lots of Size Options

  • <i class="icon-caret-right"></i> Delivered in 3-5 Days

  • <i class="icon-caret-right"></i> 30-Day Return Policy

                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="product col-12 col-sm-6 col-lg-12"&gt;
                      &lt;div class="grid-inner row no-gutters"&gt;
                          &lt;div class="product-image col-lg-4 col-xl-3"&gt;

attachment

								&lt;div class="bg-overlay"&gt;
									&lt;div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400"&gt;
									&lt;/div&gt;
									&lt;div class="bg-overlay-bg bg-transparent"&gt;&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
							&lt;div class="product-desc col-lg-8 col-xl-9 px-lg-5 pt-lg-0"&gt;
								&lt;div class="product-title"&gt;&lt;h3&gt;Checked Short Dress&lt;/h3&gt;&lt;/div&gt;
								&lt;div class="product-price"&gt;$24.99 $12.49&lt;/div&gt;
								&lt;div class="product-rating"&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star-half-full"&gt;&lt;/i&gt;
								&lt;/div&gt;

								&lt;p class="mt-3 d-none d-lg-block"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!&lt;/p&gt;
								&lt;ul class="iconlist d-none d-xl-block mt-md-3"&gt;

  • <i class="icon-caret-right"></i> Dynamic Color Options

  • <i class="icon-caret-right"></i> Lots of Size Options

  • <i class="icon-caret-right"></i> Delivered in 3-5 Days

  • <i class="icon-caret-right"></i> 30-Day Return Policy

                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="product col-12 col-sm-6 col-lg-12"&gt;
                      &lt;div class="grid-inner row no-gutters"&gt;
                          &lt;div class="product-image col-lg-4 col-xl-3"&gt;

attachment

								&lt;div class="bg-overlay"&gt;
									&lt;div class="bg-overlay-content align-items-end justify-content-between" data-hover-animate="fadeIn" data-hover-speed="400"&gt;
									&lt;/div&gt;
									&lt;div class="bg-overlay-bg bg-transparent"&gt;&lt;/div&gt;
								&lt;/div&gt;
							&lt;/div&gt;
							&lt;div class="product-desc col-lg-8 col-xl-9 px-lg-5 pt-lg-0"&gt;
								&lt;div class="product-title"&gt;&lt;h3&gt;Checked Short Dress&lt;/h3&gt;&lt;/div&gt;
								&lt;div class="product-price"&gt;$24.99 $12.49&lt;/div&gt;
								&lt;div class="product-rating"&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star3"&gt;&lt;/i&gt;
									&lt;i class="icon-star-half-full"&gt;&lt;/i&gt;
								&lt;/div&gt;

								&lt;p class="mt-3 d-none d-lg-block"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, sit, exercitationem, consequuntur, assumenda iusto eos commodi alias aut ipsum praesentium officia pariatur doloremque dolor tenetur esse vitae voluptatibus inventore delectus. Eaque laboriosam quaerat accusamus! Porro, laboriosam temporibus dolorum doloremque dolorem ex ducimus recusandae repellat neque sapiente ab numquam rerum deleniti!&lt;/p&gt;
								&lt;ul class="iconlist d-none d-xl-block mt-md-3"&gt;

  • <i class="icon-caret-right"></i> Dynamic Color Options

  • <i class="icon-caret-right"></i> Lots of Size Options

  • <i class="icon-caret-right"></i> Delivered in 3-5 Days

  • <i class="icon-caret-right"></i> 30-Day Return Policy

                              &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;

              &lt;/div&gt;&lt;!-- #shop end --&gt;[/ch_pre]
SSemicolon WebSTAFFMay 16, 2021

Hello,

It is Definitely Possible to enable Lazy Loading. For Images you can consider using the following code:
[ch_pre]
attachment
[/ch_pre]

Consider checking out our Documentation: http://docs.semicolonweb.com/docs/shortcodes/lazy-loading/ which already includes Code Samples.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

MMaximM777May 16, 2021

Thank you

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard