Background Image Lazy Load

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

But, most of the images on my current app are in background.
I found a jQuery plugin which does support this.
http://jquery.eisbehr.de/lazy/example_load-background-images

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

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!

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.

1 Like

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>
2 Likes

That works for me, and works great! :smile:
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?