Merri/react-lazy

Instantly Loading img tags That Are Within Hidden Containers

johnnyshankman opened this issue · 2 comments

johnnyshankman commented

Recreation steps

Markup:

<div className='hidden'>
  <Lazy cushion={0} >
    <img className='impression-tracker'
      src={url} />
  </Lazy>
</div>

Create a <div> that has display: none on it in order to hide it.
Put an <img> wrapped in a <Lazy> component inside of this hidden div.

Results

The <img> tag's src is requested instantly no matter what, even if the <img> and container would be way outside of the viewport once display: block is given to the container. This means the <img> tag fails to lazily load, and is instead loaded on pageload.

Info

I'm not sure if this is unexpected behavior, but I'd assume so.

Merri commented

Sorry for the very delayed reaction. This should now be fixed in v0.2.1, but I didn't do extensive testing yet. Used this StackOverflow answer as a reference to trust for now.

Merri commented

Based on testing this on a production site this appears to be working correctly now, so I close the issue.