Extending `load` function instead of overriding #235

jln-pl · 2020-04-21T11:30:33Z

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.

The text was updated successfully, but these errors were encountered:

igorkamyshev · 2020-07-02T07:17:44Z

Hi!

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

Giovancruz · 2021-05-19T17:33:51Z

+1

Giovancruz · 2021-05-19T17:38:55Z

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 · 2022-02-24T16:50:04Z

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

Extending `load` function instead of overriding #235

Extending `load` function instead of overriding #235

jln-pl commented Apr 21, 2020

igorkamyshev commented Jul 2, 2020

Giovancruz commented May 19, 2021

Giovancruz commented May 19, 2021

Dru-S commented Feb 24, 2022

Extending load function instead of overriding #235

Extending load function instead of overriding #235

Comments

jln-pl commented Apr 21, 2020

Expected Behavior

Current Behavior

Possible Solution

Context

igorkamyshev commented Jul 2, 2020

Giovancruz commented May 19, 2021

Giovancruz commented May 19, 2021

Dru-S commented Feb 24, 2022

Extending `load` function instead of overriding #235

Extending `load` function instead of overriding #235