search

wadackel / react-stack-grid

Pinterest like layout components for React.js
https://wadackel.github.io/react-stack-grid/
MIT License
870 stars 77 forks source link

images overlap #39

Open ahmaxed opened 6 years ago

ahmaxed commented 6 years ago

the images overlap when the page is visited for the first time. upon refresh, the images load correctly. https://pinter.herokuapp.com/ there is how react-stack-grid is used: https://github.com/moT01/pinterest/blob/master/client/src/components/main/MainPage.js

wadackel commented 6 years ago

Hi @ahmadabdolsaheb Thank you for Issues :smiley:

It is thought that it is caused by the indeterminate size of the image. Would you please try monitorImagesLoaded as true?

ahmaxed commented 6 years ago

thanks for the fast response, @tsuyoshiwada setting monitorImagesLoaded as true, although it resolves the overlapping eventually, causes an undesired animation. It seems like the images gets dragged to right place. you could see it better when you load the page for the first time. https://pinter.herokuapp.com/ if I am not mistaken, it is suggested in the documentation to use monitorImagesLoaded with the imagesLoaded package, so I am working on that. any further suggestion would be appreciate it.

wadackel commented 6 years ago

@ahmadabdolsaheb I'm sorry for late response...

If you know the size of the image in advance, specifying the image size is the best measure. If that is impossible, the following workaround may be useful.

  1. Load the image to be displayed using imagesLoaded
  2. Load all images to be displayed
  3. Display spinner while loading
  4. When loading of all images is completed, render using <StackGrid />

However, this will cause the spinner to be displayed until all the images have been read, so the display will be felt late :cry:

NevenLeung commented 6 years ago

@tsuyoshiwada Thanks for you efford on this project.

My problem

I have met some problem in the image overlapping when searching photos by a keyword or updating the pager.

The images can be displayed after a short time overlapping period, is it any other way to improved the user experience?

react-stack-grid

My usage

Here is my usage of react-stack-grid.

<StackGrid
  className={styles.photoGrid}
  columnWidth={210}
  monitorImagesLoaded={true}
>
  {PhotoItems}
</StackGrid>

My solution (not implement yet)

I have tried to add the loading spinner everytime after clicking search button and updating the pager to give react-stack-grid time to tidy the images. But it could be hard to handle the the duration time of spinner.

Would you minding adding a new props which is the callback function called by imagesloaded, like imagesloaded example.

Updated

I just tested the app in github page (click the second button in the header will see the setting modal), and it works very well.

Would it be my computor performance problem when in local development?