React Typescript usage example
mehdy-karimpour opened this issue · 2 comments
mehdy-karimpour commented
Hi,
I want to use this amazing library in my React Typescript project.
I have added "lazysizes": "5.3.2"
to package.json
and in my .tsx
file
import 'lazysizes';
then:
return (
<>
<img
className="lazyload"
data-sizes="auto"
data-src={imageModel.defaultUrl}
data-srcset={imageModel.breakpointImages!.map((v, i) => `${encodeURI(v.element.url)} ${v.element.width}w`).joinComma(", ")}
/>
<img
className="lazyload"
data-sizes="auto"
data-src={imageModel2.defaultUrl}
data-srcset={imageModel2.breakpointImages!.map((v, i) => `${encodeURI(v.element.url)} ${v.element.width}w`).joinComma(", ")}
/>
<img
className="lazyload"
data-sizes="auto"
data-src={imageModel3.defaultUrl}
data-srcset={imageModel3.breakpointImages!.map((v, i) => `${encodeURI(v.element.url)} ${v.element.width}w`).joinComma(", ")}
/>
<img
className="lazyload"
data-sizes="auto"
data-src={imageModel4.defaultUrl}
data-srcset={imageModel4.breakpointImages!.map((v, i) => `${encodeURI(v.element.url)} ${v.element.width}w`).joinComma(", ")}
/>
......
...... (10 images)
</>
);
I did not see lazysizes.min.js
in Chrome debugger Network tab and all images are loaded immediately. (no lazy load)
I went for JS like approach and add lazysizes.min.js
to web page, but it loads all 10 images immediately even those are not in the viewport. All of them marked as class="lazyautosizes ls-is-cached lazyloaded"
.
Would you please help me?
mehdy-karimpour commented
Solved!
othy54 commented
@mehdy-karimpour Hello, can you tell how do you solved it ? Thanks !