Transform "beforeUnveil" and "beforeSizes" callbacks to event

[aFarkas]

Currently any system can hook into the "get in view logic" and extend changing the sizesor "unveiling" elements through the beforeUnveil or beforeSizes callback for something like a background or a video poster it could look something like this:

lazySizesConfig = {
    beforeUnveil: function(element){
        var tmpAttribute = element.getAttribute('data-bg');

        //handle background image
        if( tmpAttribute ) {
            element.style.backgroundImage = tmpAttribute;
            return false;
        }

        //handle poster
        tmpAttribute = element.getAttribute('data-poster');

        if(tmpAttribute){
            element.poster = tmpAttribute;

            //handle preload
            if(element.preload == 'none'){
                element.preload = 'auto';
            }
            return false;
        }
    }
};

For seperation of concerns it would be a lot better to handle does extendable cases through events. The beforeUnveil option could be called beforeunveil, lazyinview or ?. The beforeSizes callback could be called beforesizes, lazyautosizesor ?. Any suggestions are appreciated!!!

Using this system could be used with and without event delegation:

Here an example using event delegation for the backgroundImage transition and for the video[data-poster] transition:

//add simple support for background images:
document.addEventLister('beforeunveil', function(e){
    var bg = e.target.getAttribute('data-bg');
    if(bg){
        e.target.style.backgroundImage = bg;
        e.preventDefault();
    }
}, true);

//add simple support for video elements
document.addEventListener('beforeunveil', function(e){
    var poster = this.getAttribute('data-poster');
    if(poster){
        this.poster = poster;
        if(this.preload == 'none'){
            this.preload = 'auto';
        }
        e.preventDefault();
    }
});

This way lazySizes handles still the most important usecases (image, iframes) and is lightweight, but makes sure that other usecases can be implemented much easier.

Note: backgroundimages and video posters are not scanned by the preload parser. Therefore they delay the onload event, but aren't often delaying other resources (because thier download priority is already often lower, that from other resources).

see also: #2 and #1

[rolfnl]

I would at least add a lazysizes reference to the events, beforeunveil or beforesizes are a bit generic. Perhaps lazybeforeunveil is a better candidate than lazyinview.

Nice work

[aFarkas]

@rolfnl
Yes, I absolutley agree. The idea behind lazyinview was only to make sure, people understand, that this event also can be used to do something entirely else than lazyloading/unveiling, but because the default action will be "unveiling", i will indeed call this lazybeforeunveil and lazybeforesizes.

[aFarkas]

ping: @julien-f and @mikestecker
Just added this feature to the master branch. Here is the documentation:
https://github.com/aFarkas/lazysizes/tree/master#js-api---events
Additionally added a simple plugin for video + backgroundimage:
https://github.com/aFarkas/lazysizes/blob/master/plugins/ls.unveilhooks.js

Due to the fact that this is a great, but non backwards compatible API change (i.e.: I have removed the simple beforeUnveil callback), I would like to push this soon. Would appreciate any feedback. (positive or negative).

[julien-f]

Thank you, it looks great!

I don't have time to play with it for now (overloaded by work for a few weeks) but I'll keep an eye on it.