Problem with window position jumping when adding new data

[ambrt]

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]

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]

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]

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]

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]

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!