Lazysizes: webpack and lazySizesConfig

[thasmo]

When loading lazysizes via import lazySizes from 'lazysizes'; and bundling it with webpack it is executed immediately (in the browser) and I can't seem to find a way to set lazySizesConfig before lazysizes executes.

Does someone know how I can set lazySizesConfig to the window object, so it's available for lazysizes before it runs, in a webpack-context?

[aFarkas]

@thasmo

You don't need to. Although lazySizesConfig is generated immediately with importing, lazysizes is not initialized immediately. As soon as you are using import I also suggest to do not use lazySizesConfig at all and use lazySizes.cfg instead.

You can do something like this:

import lazySizes from 'lazysizes';
import 'lazysizes/plugins/respimg/ls.respimg';
import 'lazysizes/plugins/optimumx/ls.optimumx';

//lazySizes.cfg == window. lazySizesConfig
Object.assign(lazySizes.cfg, {
    yourOptionA: 'foo',
    yourOptionB: 'bar',
});

//lazySizes.init();

Did this help?

[thasmo]

Wow, that's super easy. Thanks for the quick response, works flawlessly! Is this mentioned in the docs or somewhere else? Thanks!

[xsynaptic]

Just chiming in to say this snippet was useful and works as advertised when bundling modules with webpack and using import with plugins!

[thasmo]

For some reason this didn't work for a project we're working on currently. lazySizes was executing before Object.assign was called. I had to change how lazySizes gets loaded and executed, and it looks a bit odd:

(window as any).lazySizesConfig = {
    init: false,
    hFac: 10,
    loadMode: 1,
    lazyClass: 'js-lazy',
    loadingClass: 'is-loading',
    loadedClass: 'is-loaded',
    throttleDelay: 100,
};

new Promise((resolve) => {
    if ('HTMLPictureElement' in window) {
        resolve();
    }
    import('picturefill').then(() => resolve());
}).then(() => {
    Promise.all([
        import('lazysizes'),
        import('lazysizes/plugins/object-fit/ls.object-fit'),
    ]).then(([lazySizes]) => {
        lazySizes.init();
    });
});

It would be really useful if lazySizes would not be self-executing and options could just be passed directly without the need for a global variable.

import lazySizes from 'lazysizes';

lazySizes.init({
    hFac: 10,
    loadMode: 1,
    lazyClass: 'js-lazy',
    loadingClass: 'is-loading',
    loadedClass: 'is-loaded',
    throttleDelay: 100,
});

[thasmo]

Optimally, something like this would be possible too then:

import lazySizes from 'lazysizes';
import 'lazysizes/plugins/object-fit/ls.object-fit';

new Promise((resolve) => {
    if ('HTMLPictureElement' in window) {
        resolve();
    }
    import('picturefill').then(() => resolve());
}).then(() => {
    lazySizes.init({
        hFac: 10,
        loadMode: 1,
        lazyClass: 'js-lazy',
        loadingClass: 'is-loading',
        loadedClass: 'is-loaded',
        throttleDelay: 100,
    });
});

[tomm1996]

In our case, the window.lazySizes.cfg.rias.widths property was overridden by the defaults widths array.
We solved it like this:

import '../configs/lazysizesconfig';
import 'lazysizes/plugins/rias/ls.rias';
import 'lazysizes/plugins/respimg/ls.respimg';
import 'lazysizes/plugins/print/ls.print';
import 'lazysizes/plugins/parent-fit/ls.parent-fit';
import 'lazysizes/plugins/optimumx/ls.optimumx';
import 'lazysizes/plugins/aspectratio/ls.aspectratio';
import lazySizes from 'lazysizes';

// lazysizesconfig.js
window.lazySizesConfig = {
    rias: {
        widths: [
            270,
            320,
            372,
            480,
            560,
            // ...
        ]
    }
};