react-lazy-load icon indicating copy to clipboard operation
react-lazy-load copied to clipboard

"Connected" lazyload loads simultaneously

Open eneadriancatalin opened this issue 6 months ago • 1 comments

If you have 2 lazyload each one next to the other, when the first one is in viewpost, the second one is loaded automatically. Example:

<div>
<LazyLoad ..>
    <Component1 />
  </LazyLoad>
</div>
<div>
  <LazyLoad ..>
    <Component2 />
  </LazyLoad>
</div>

Even if I have the <LazyLoad> inside a div, when the Component1 is in the viewport, the Component2 is loaded too

Workaround: If you have some content between each <LazyLoad> then it loads when it is the viewport

<LazyLoad ..>
  <Component1 />
</LazyLoad>
<div>Filler content</div>
<LazyLoad ..>
  <Component2 />
</LazyLoad>
<div>Some more spacer content</div>

Now Conmponent1 is loaded when it's in the viewport, and Component2 is loaded when it's in the viewport

eneadriancatalin avatar Jul 26 '24 23:07 eneadriancatalin