vtex-lazyload and lazysizes conflict
DaimonX opened this issue · 0 comments
DaimonX commented
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';