Vanilla-lazyload: Attribute data-bg combined with media queries or width

[mihail-minkov]

Is your feature request related to a problem? Please describe.

I frequently use backgrounds on div elements, but many times I need to select a specific image size for a specific media query. I normally do this using breakpoints in my CSS file, but it doesn't load lazily :)

Describe the solution you'd like

Something similar to data-bg, except that the information in data-bg could be a JSON array with background objects having two parameters: media and image.

Something like:

<div class="lazy" data-bg-list='[{media: 'max-width: 640px', image: '/img/small.jpg'}, {media: 'min-width: 641px', image: '/img/medium.jpg'}, {media: 'min-width: 1025px', image: '/img/large.jpg'}]'>

</div>

The idea could also apply to data-bg-hidpi.

[fienen]

I don't have anything to add here except a +1 to the idea. I was literally just researching whether or not the tool could support this because I'm replacing markup that's set up the same way.

[LeaTark]

No doubt not the best way to do it but this is how I use lazyload to get responsive lazy backgrounds.

Not just backgrounds, I trigger all manner of effects this way.

<style>
  @media (max-width: 767.98px) {#mydiv.lazy-loaded {background-image: url("small.jpg");}}
  @media (min-width: 768px) {#mydiv.lazy-loaded  {background-image: url("big.jpg");}}
</style>


<div id="mydiv" data-lazy-css></div>


<script>
  window.llStyles = new LazyLoad({
    elements_selector: "[data-lazy-css]",
    threshold: 0,
    unobserve_entered: true,
    callback_enter: function (element) {
      element.classList.add('lazy-loaded');
    }
  });
</script>

[mihail-minkov]

@LeaTark that looks interesting. So you basically add the styles for each background inside the file and then by adding the class you force the background to load?

What other applications do you refer to?

[LeaTark]

@mihail-minkov, yes, the images in the media queries aren't loaded until the rule finds a match, which only happens after lazyload adds a class.

I use the same method to trigger css animations and other effects when elements enter viewport, e.g. sheen effects to draw attention to calls to action.

This is why I set threshold: 0, so the effects are only applied when the element is in viewport and not before.

Then unobserve_entered: true, so the effects are only applied the first time an element enters viewport and not multiple times if the page is scrolled back and forth.

[verlok]

Thanks @mihail-minkov for the idea, I'll think about it.

The implementation that @LeaTark is suggesting is also interesting. Congrats!

Sorry guys for the late reply, I'm on my annual leave (holidays with family).

[andre-brdoch]

Is there any news on this one? 😄 this feature would allow for great performance improvments

[verlok]

Bad times for development my friend.
Coronavirus, lockdown, schools closed, work from home, no time on commuting.
I will find the time, sooner or later.