Extending load function instead of overriding

[jln-pl]

Expected Behavior

I would like to extend load function not to override it, e.g. add dispatching some event, add some logs etc.

Current Behavior

I can provide my own load function which override the default one. So if I write something like this:

lozad('.lozad', {
    load: function(el) {
        console.log('loading element');
    }
});

lazy loading will not work, because my function (with only console.log) will override the default one.

Possible Solution

Export load function from defaultConfig, so I can do this:

// lozad.js
export function load() {
    ...
}

export default function lozad() {
    ...
}

// my-code.js
import lozad, { load } from 'lozad';

lozad('.lozad', {
    load: function(el) {
        console.log('loading element');
        // dispatch my event
        // do something
       load();
    }
});

Context

I want to replace lazysizes with lozad, but I need to dispatch lazybeforeunveil event.

[igorkamyshev]

Hi!

Maybe for backward compatibility and better API, we can just add new eventListener? Something like onBeforeLoad?

[Giovancruz]

+1

[Giovancruz]

On doc describes the method 'loaded', maybe it help you:

If you would like to extend the loaded state of elements, you can add the loaded option:

Note: The "data-loaded"="true" attribute is used by lozad to determine if an element has been previously loaded.

lozad('.lozad', {
    loaded: function(el) {
        // Custom implementation on a loaded element
        el.classList.add('loaded');
    }
});

[Dru-S]

Does anyone have found any solution for this, or someone have already open a pull request?

Maybe it's possibile to simply add a beforeLoad() and an afterLoad() functions, before and after the load() one, something like:

beforeLoad: function beforeLoad() {}
load: function load(element) {
  // Default `load()` things
  ...
},
afterLoad: function afterLoad() {}
loaded: function loaded() {}

and call them in the observe and triggerLoad methods, like:

beforeLoad(element);
load(element);
afterLoad(element);
markAsLoaded(element);
loaded(element);

What do you guys think?

Cc @ApoorvSaxena