Discuss

Using Lazy Load for Image on Your Page

On this page

Lazy Load Component offers the so called "lazy loading" for the images on your page. This means, that when your page contains many images, you don't have to wait for the page load them initially. The component uses an intelligent resource prioritization algorithm, so the In-view images are loaded fast and near-view images are preloaded lazily before they come into view. This optimizes loading times greatly, especially for pages with tens or hundreds of images.

In this tutorial you will learn how to use the Lazy Load Component with static images. First, let's add an image on our page:

Screenshot_2|690x395

Open the Content category, and select image:

Screenshot_3|690x395

Note, that we are not using the default src attribute here. It must remain empty:

Screenshot_4|690x395

We enable the responsive option, as this is a Bootstrap 4 Layout which needs responsive images:

Screenshot_5|690x395

Scroll further down and add new dynamic attribute:

Screenshot_6|690x395

Open the Display category and select Lazy Load:

Screenshot_7|690x395

Then browse to your image:

Screenshot_8|690x395

And you are done. The Lazy Load component has been added to your image:

Screenshot_10|690x395

Do this for all of the images on your page. The results are great - you can see in the browser console, that only the needed images are loaded on page load. The rest are being loaded when we start scrolling:

ezgif-1-cebd3b91be84|690x395


WapplerPrevious|101x31   WapplerNext|77x31