Background Image Lazy Load

[nshkrsh]

Hi.
Following the below tutorial, I was able to set lazy load on images.

Using Lazy Load for Image on Your 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 h…

But, most of the images on my current app are in background.
I found a jQuery plugin which does support this.

Delayed Content, Image and Background Lazy Loader

If this functionality could be added to Wappler too, it would be cool.

[Teodor]

Hi @nshkrsh,

You can try not to use background-image in your html code because Google can’t index those images.

Try creating a <div> wrapper with overflow:hidden and put an <img> inside of that div. If you structure your code that way, you can still use the lazy load!

[nshkrsh]

It’s said that Google does not index background images, but in my use case, I don’t need my images to be indexed. This function is required mostly in case of articles or blog posts. My use-case contains images only for displaying on the website.

This case would be true for most websites which have a general information page or homepage where images are just a part of the design and aren’t vital to the business.

[patrick]

It is not documented or official supported in Wappler, but you can simply do it by adding a lazyload class to the element. the lazyload class gets replaced with lazyloaded when the element is in view. This way you set the background image when the lazyloaded class is present.

in your css add something like

.img1 {
  width: 100%;
  height: 200px;
  background-size: cover;
}
.img1.lazyloaded {
  background-image: url('img/img1.jpg');
}

in your html you only add the lazyload class

<div class="img1 lazyload"></div>

[nshkrsh]

That works for me, and works great!
Just to complete the answer, one more thing that I would have to do is add dmx lazyload script.

<script src="dmxAppConnect/dmxLazyLoad/dmxLazyLoad.js"></script>

I had that because I used lazy load in another image’s dynamic attribute. But otherwise, anyone trying this would have to add the above script and lazy load will work on background-images. Is that enough or is there something else required too?