search

janzheng / svelte-masonry

Masonry for Svelte
https://svelte-masonry-one.vercel.app/
23 stars 7 forks source link

Problem with window position jumping when adding new data #2

Closed ambrt closed 11 months ago

ambrt commented 4 years ago

I'm implementing infinity scroll and this repo masonry.

The problem is that when masonry is re-initiated after new data being loaded, the window looses its position and jumps up.

I'll try to make a example on repl.

ambrt commented 4 years ago

https://svelte.dev/repl/66310de6bb4f474e9fc2cf8ceef30cc5?version=3.24.1

steps to reproduce:

  1. Expand preview to have 3 columns
  2. Scroll down to bottom
  3. Mouse click anywhere on body
  4. Press letter key "m" few times to re-initiate masonry and see jumps

It will cause window position to jump way up, instead of staying in same place.

janzheng commented 4 years ago

hmmm I added a way to refresh the grid calculations. I modified your code a bit (just playing around with picsum!) and I tied an image's on:load modifier to the refresh function. This works, but it's not very efficient, since it refreshes for every image that finishes loading. I'm not sure how to trigger on:load once on an array of loaded images...

Another limitation to the algorithm is it doesn't seem to do a good job of balancing items when they wildly vary in size, but I think that's a much harder issue to solve.

Here's my REPL test: https://svelte.dev/repl/2c5a8e5ae579471ea22b3f5561268d11?version=3.24.1

Thanks for calling these few out! I was planning on using this for infinite loading as well, so I was going to run into these bugs eventually 👍

ambrt commented 4 years ago

I'm not sure how to trigger on:load once on an array of loaded images...

One of proposed solutions, somewhere on stackoverflow was to add onLoad to every image and count times it was fired. When its fired equal times to number of images in array one could assume that all were loaded. Or via adding listener for load event.

Here's the load event bit https://stackoverflow.com/a/24201249/7096189.

janzheng commented 4 years ago

oh that's a clever solution! I'll try to implement it! I might also consider a debounce function but that's a more heavy-handed solution

janzheng commented 11 months ago

It's only been 3 years (sorry...), but I've bumped the version to Sveltekit and created a new working demo here, with async: https://svelte-masonry-one.vercel.app/

Please report new/existing bugs in a new issue!