aFarkas/lazysizes

vtex-lazyload and lazysizes conflict

DaimonX opened this issue · 0 comments

i have image injected inside outer world app. And this world app has vtex-lazyload based on lazysizes.
And its configured as

{
    "lazyClass": "js--lazyload",
    "loadedClass": "is--lazyloaded",
    "loadingClass": "has--lazyloading",
    "preloadClass": "js--lazypreload",
    "errorClass": "has--lazyerror",
    "autosizesClass": "lazyautosizes",
    "srcAttr": "data-src",
    "srcsetAttr": "data-srcset",
    "sizesAttr": "data-sizes",
    "minSize": 40,
    "customMedia": {},
    "init": true,
    "expFactor": 1.5,
    "hFac": 0.8,
    "loadMode": 3,
    "loadHidden": true,
    "ricTimeout": 180,
    "fastLoadedClass": "ls-is-cached",
    "iframeLoadMode": 0,
    "throttleDelay": 125
}

my lazysizes.cfg:

{
    "lazyClass": "lazyload",
    "loadedClass": "lazyloaded",
    "loadingClass": "lazyloading",
    "preloadClass": "lazypreload",
    "errorClass": "lazyerror",
    "autosizesClass": "lazyautosizes",
    "fastLoadedClass": "ls-is-cached",
    "iframeLoadMode": 0,
    "srcAttr": "data-src",
    "srcsetAttr": "data-srcset",
    "sizesAttr": "data-sizes",
    "minSize": 40,
    "customMedia": {},
    "init": true,
    "expFactor": 1.5,
    "hFac": 0.8,
    "loadMode": 3,
    "loadHidden": true,
    "ricTimeout": 0,
    "throttleDelay": 125
}

So when my lazy image laods it seems it cant use .lazyload class anymore.
How i can resolve this conflict ?

Updated:
Ive found how to solve it.
In my code i configured custom classes

import lazySizes from 'lazysizes';

lazySizes.cfg.lazyClass = 'my-prefix-lazyload';
lazySizes.cfg.loadingClass = 'my-prefix-lazyloading';
lazySizes.cfg.loadedClass = 'my-prefix-lazyloaded';