Image only loads after entire image enters viewport

[vinaybedre]

Hi,

See the code sample at https://codesandbox.io/s/m94pp34x9y Until the entire image do not come under the viewport, the actual image wont get loaded. Can you please help how to fix this? For me it either looks like I am missing something or there is issue with the framework.

The actual behavior should have been that as soon the top of the image enters the viewport, the actual image should get loaded up.

The issue occurs when I specify the height for image.

[imbhargav5]

Hey @vinaybedre , you can use visibilitySensorProps and get it to work.

    <LazyImage
          placeholder="https://images-eu.ssl-images-amazon.com/images/I/41fT611rSBL._SL10_.jpg"
          src="https://images-eu.ssl-images-amazon.com/images/I/41fT611rSBL.jpg"
          visibilitySensorProps={{
            partialVisibility: true
          }}
        >
          {(src, _loading, srcSetData) => (
            <img
              id="productImg"
              class="img-fluid img-responsive rounded mx-auto d-block"
              style="height:400px;width:auto;"
              src={src}
            />
          )}
        </LazyImage>

Try this :) https://codesandbox.io/s/qln785vo4w

[imbhargav5]

Closing this, since it's not a bug, but a usability issue.

[vinaybedre]

Thanks @imbhargav5. That helped.

partialVisibility should be set to true to work.

[imbhargav5]

Oh yeah haha I was testing with true and false. Pasted the wrong snippet.