React Typescript usage example

[mehdy-karimpour]

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]

Solved!

[othy54]

@mehdy-karimpour Hello, can you tell how do you solved it ? Thanks !