Vanilla-lazyload: How to correctly use `data-bg` for Lazy background image

[sendmenas]

Hi,

I am trying to use lazy load for background image. I have read the discussion regarding the proposition to use img tag instead of background, and I am thinking of doing this :) But I was wandering what is the purpose of data-bg then and how to use it correctly, if it is ment to lazy load the background image.

My element looks like this:
<div class="lazy" data-bg="url(https://something.com/image.png)" alt="book"</div>
No background image indicated in CSS.

In my case I see that my div is getting data-was-processed="true" prop as well style with the correct image link. So it looks like everything is working.
My element looks like this:
<div class="lazy" data-bg="url(https://something.com/image.png.png)" alt="book" data-was-processed="true" style="background-image: url(https://something.com/image.png.png);"></div>

But the image is still not visible, as opacity stays the same - 0. As I understand, the div should get some additional class, and that is not happening. So am I doing something wrong, or is it working as intended? If so, what is data-bg used for then? :)

I added the css selector in my css to className[data-was-processed='true'] { opacity: 1; } and it solved the issue. But this looks like a workaround.

LazyLoad version

• Version [10.19.0]

Desktop (please complete the following information):

• Browser [chrome]
• Version [e.g. 79]

[verlok]

Hey, this is a very well written issue. Thank you.

But I was wandering what is the purpose of data-bg then and how to use it correctly

The purpose is: if you have a very long page with many background images, you might want to lazy load the background images that are way below in your page.

My element looks like this: ... But the image is still not visible, as opacity stays the same - 0.

I don't understand. What is giving your div an opacity of 0? Your CSS I suppose.

As I understand, the div should get some additional class, and that is not happening.

On background images, lazyload doesn't add neither the loading nor the `loaded' class, because a background image doesn't fire any javascript event when it's loaded.

I added the css selector in my css to className[data-was-processed='true'] { opacity: 1; } and it solved the issue. But this looks like a workaround.

That is a good workaround actually.

[verlok]

The best solution though is to ask yourself: are my images content (meaningful) or background (purely decorative)?

If they are content, use an img tag for accessibili, SEO, print, etc.

[sendmenas]

Thank you for answering my questions. They helped me to find the issue - the opacity was set in my code (some time ago) and I forgot about it. I thought it is native in the use of the lib :)

Thanks again for all your work!

[verlok]

You're welcome!

[verlok]

Hey @sendmenas,
things changed on version 15.

I found a way to manage background images's load/error event, so now background images are now getting the loaded or error class.

Take a look at the changelog and to the upgrading guide if you're interested.

Have a nice day.

[sendmenas]

Cool! There were a lot of comments from other users as well regarding this, if I remember correctly, so I guess they will be very happy with this update 😄 Thanks for keeping up the work and for notifying me, I will check it out.