Hi,

just have added a new feature (which is off by default). It's the addClasses feature. With this, you can easily add new styles, before elements come into view.

To add a background image this could look like this:

<style>

.lazyloaded.stage {
    background-image: url(image.jpg);
}
</style>

<script>
window.lazySizesConfig = {
    addClasses: true
};
</script>

With this feature it is also possible to add incomming effects:

<style>
.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}
</style>

<script>
window.lazySizesConfig = {
    addClasses: true
};
</script>

Hope you are fine with this?

I was thinking about the responsive option regarding the background images, like in srcset. The background should have a set of URL links to images of different sizes that will be used depending on the size of the container, device and DPI.

Example:

<div data-bgset=“bg1.jpg w320, bg2.jpg w600, bg3.jpg w1024”>
 ...
</div>

Yes, I know. I just made a background image example to make it shorter for me. Here is an image-set example:

<style>

.lazyloaded.stage {
    background-image: url(image.jpg); 
    background-image: -webkit-image-set(url('image.jpg') 1x, url('image-2x.jpg') 2x);
    background-image: image-set(url('image.jpg') 1x, url('image-2x.jpg') 2x);
}
</style>

<script>
window.lazySizesConfig = {
    addClasses: true
};
</script>

I think that your example

<div data-bgset=“bg1.jpg w320, bg2.jpg w600, bg3.jpg w1024”>
 ...
</div>

could be solved with css media queries

@media (max-width: 230px) {
  div { background-image: url(bg1.jpg); }
}
@media (max-width: 600px) {
  div { background-image: url(bg2.jpg); }
}
@media (max-width: 1024px) {
  div { background-image: url(bg3.jpg); }
}

And it could be automatically generated in backend...

Yes and no.

Lets say, you are viewing on a desktop, and you have a max-width of 1024px. You have a minislider in your page, where images are set in the background. When you have this slider in a full width row, it's ok to load bg3.jpg (1024px), but if this slider is in a 1/2 or 1/4 column, on same screen resolution, the width of the slider (width of container with background image) should be 512px or 256px.

example in this screenshot
http://static.md/25844a3f992051b7b781f772d2e2a308

Yes...
Then we need data-bgset plugin :)

no we need element queries

Will look into this.

Just to play with:

<div class="lazyload" data-bgset=“bg1.jpg 320w, bg2.jpg 600w, bg3.jpg 1024w”>
 ...
</div>

document.addEventListener('lazybeforeunveil', (function(){
    var parent = document.createElement('div');

    return function(e){
        var set, image, load;

        if(e.defaultPrevented || !(set = e.target.getAttribute('data-bgset'))){return;}
        image = document.createElement('img');
        image.setAttribute('sizes', e.target.getAttribute('data-sizes') || (e.target.offsetWidth +'px'));

        load = function(){
            var bg = image.currentSrc || image.src;
            if(bg){
                e.target.style.backgroundImage = 'url('+ bg +')';
            }
            if(lazySizes.cfg.clearAttr){
                e.target.removeAttribute('data-bgset');
            }
            image.removeEventListener('load', load);
            parent.removeChild(image);
            image = null;
        };

        image.addEventListener('load', load);

        image.setAttribute('srcset', set);
        parent.appendChild(image);
        if(!window.HTMLPictureElement){
            if(window.respimage){
                respimage({elements: [image]});
            } else if(window.picturefill) {
                picturefill({elements: [image]});
            }
        }

        if(image.complete && (image.src || image.currentSrc)){
            load();
        }
    };
})());

It uses respimage to parse the srcset and calulate the right candidate. The script does not work on hidden elements.

@alexluncashu
Did you have time to test the snippet above? Any suggestions before I use this snippet as a blueprint for the unveilhooks plugin?

It works ;)
Thank you.