threshold doesnt work beyond -200px for mobile devices

[dukesx]

Bug description The Threshold option doesn't work beyond -200px. What i mean is, that my pictures are of 400px height. I am trying to mimic Medium's way of loading images. Show placeholder to user then load. So, to do this, i need the threshold to load images only if viewport is showing full image , i.e threshold at -400px. Now for desktop, this works but if i change virtual device to mobile device in chrome debugger tools, it doesn't work. shows placeholder but doesnt load the real image. if i however keep threshold at -200px, it works for both.

To Reproduce Paste the code that is producing the issue

         <LazyLoadImage
            className="o-fit-cover"
           height={400}
          src={blocks.data.file.url}
          threshold={-200}
         effect="opacity"
         scrollPosition={props.scrollPosition}
         placeholderSrc={
         blocks.data.file.url.slice(
        0,
       blocks.data.file.url.length - 5
       ) + "-placeholder.webp"
      }
      style={{ width: 400, maxWidth: "100%" }}
      ></LazyLoadImage>

List any other actions needed to reproduce the issue:

consider this,

• imagine image of 600px height and threshold above half its height, such as 320px and scroll towards the image vertically in mobile view

Expected behavior Image should start loading and show the real image (high res) as soon as i see the placeholder

Screenshots

Technical details:

• Package version- Latest
• Server Side Rendering? Yes (Next-Js)
• Device [Desktop/Smartphone] - Smartphone (google chrome virtual device)
• Operating System (any)
• Browser (Chrome/Edge/Firefox)

[dukesx]

Never mind I changed to a better library.

[riccardolardi]

@dukesx which is?

[virtyaluk]

@dukesx, care to share what library are you using now? I have similar problems and don't want to waste my time waiting for the author to fix this project. Thanks.

[monolithed]

Has anyone found another library?