Lazy Load responsive background images?

[csdougliss]

I've been using unveil for a while and I was searching for something that does BG images. I found lazysizes, bgset and respimg.js and they do what I want but in total we are looking at 11.5 KB.

I like unveil's small size, so would it be possible with unveil?

html is like so:

<div class="category-top-banner lazyload" data-bgset="' . $this->getSmallImageUrl() . ' [(max-width: 650px)] | ' . $this->getLargeImageUrl() . '"' : ""; ?>>
</div>

[timbunch]

It wouldn't support it currently. However, I imagine it could be modified to do so.

[pau1phi11ips]

I wanted it to do this too. I made a small change to check if it's acting on a img tag (then set src) or acting on something else then set the background-image to the data-src value https://github.com/pau1phi11ips/unveil/blob/master/jquery.unveil.js

[lynnic26]

I need this feature too.

[thewarpaint]

@pau1phi11ips Thanks! You might want to push the new 1.3.1 tag to your repo so that it can be installed by doing $ bower install pau1phi11ips/unveil, otherwise you need to add a git ref.

[1-800-jono]

How would use this? Like this?

$(function() { $("div.Bg-img-clas").unveil(300); });