I’m working on a project which displays around 2300 images. The images can be shown in two different layouts:
- As a timeline which works quite smooth.
- And clustered by category, which is where the performance issues happen.
I need some help or suggestions on how to improve the performance when items are positioned into their clusters.
In this link you can see the timeline view, and if you click on the top right filters and choose ‘Categorie’ you will see what I mean by performance.
We’ve used pixi.js to render everything on canvas, and used a spritesheet library to reduce the amount of images from 2300 to around 135 in total (example)
At the moment everything in the filtered view gets calculated on the browser, and one approach I’m thinking of is to save the [x,y] coordinates of each image on the server, and then simply move them there, but I’m not sure if that will make a huge amount of data. Since the images will have many different places according to the active filters.
Here is the file that handles the timeline and category view: [https://pastebin.com/uRUQxf1L]