All images are loaded at once

[hamza-jutt]

Bug description
All images are loaded at once. I did read this readme section and added placeholder but it does not work. Adding height and width works but for my case that is not suitable. On adding a placeholder the browser does show that later images in the list are not in the viewport but as soon as first image starts loading all of the images get loaded.

I think that likely reason is that when image starts loading the placeholder is replaced with image source. Now while the browser is downloading the image dimensions become 0,0 for the image as it is not loaded yet. and more image get into the viewport and they start loading and so on and so on. So adding placeholder does not work.

To Reproduce
Paste the code that is producing the issue

.placeholder {
    display: block;
    width: 167px;
    height: 252px;
}

<LazyLoadImage src={URL}
     placeholder={<span className="placeholder"/>}
     height={252}/>

List any other actions needed to reproduce the issue:
If the cache is pre filled then browser does not take time to load the image and this issue can not be seen. So disable cache and maybe emulate slow network using slow 3g in network tab.

Expected behavior
Placeholder should be there until image is loaded. Placeholder is removed as soon as the image hits viewport.

Technical details:

• Package version [e.g. 1.5.0]
• Server Side Rendering? [No]
• Device [Desktop]
• Operating System [Mac OS]
• Browser [Chrome]

[aman246149]

all the images are load at once

when I add the only width to my LazyLoad image then all the HTTP request goes at once

but when I add height and width together it works fine

here my codesand box link
codesandbox working

[sc-yz]

all the images are load at once

when I add the only width to my LazyLoad image then all the HTTP request goes at once

but when I add height and width together it works fine

here my codesand box link
codesandbox working

I do not why, but you can try it, do not use LazyLoad image on the first screen

<div style={{width:"100%",height:"200px",background:"red"}}></div>
{images.map((image) => {
  return (
    <LazyLoadImage
      style={{ display: "flex", flexWrap: "wrap" }}
      alt={image.alt}
      effect="blur"
      src={image.download_url}
      key={image.id}
      width="250px"
    />
  );
})}