Infinite scrolling in a gallery? (Pacific 7.0)

Site URL: https://dawidbania.com/

Hello!

I was wondering if it is possible to make my galleries load faster?
Little background: I work as a photographer and I deliver between 400 and 600 photographs to my clients, sometimes with gifs included. The final size of the such galleries, despite using very effective compression methods, exceeds 50 megabytes. Sometimes it's over 80. I would really love to keep my galleries on Squarespace, but it's just getting really innefficient doing it this way. 

My question is: Is there any way, for example, to change the code so that only the content that should be visible is being loaded for the viewer (like infinite scrolling), and the rest of the content gets downloaded as the viewer scrolls down? Maybe it can decrease loading times and make the visit on the website smoother. Or any other method that could work? Here's an example of a troublesome gallery (especially on the phone): https://dawidbania.com/joanna-wojciech-weddingday

I'd be extremely grateful for help within this matter. I don't know how to make it work.
 

1 hour ago, dbania said:

Site URL: https://dawidbania.com/

Hello!

I was wondering if it is possible to make my galleries load faster?
Little background: I work as a photographer and I deliver between 400 and 600 photographs to my clients, sometimes with gifs included. The final size of the such galleries, despite using very effective compression methods, exceeds 50 megabytes. Sometimes it's over 80. I would really love to keep my galleries on Squarespace, but it's just getting really innefficient doing it this way. 

My question is: Is there any way, for example, to change the code so that only the content that should be visible is being loaded for the viewer (like infinite scrolling), and the rest of the content gets downloaded as the viewer scrolls down? Maybe it can decrease loading times and make the visit on the website smoother. Or any other method that could work? Here's an example of a troublesome gallery (especially on the phone): https://dawidbania.com/joanna-wojciech-weddingday

I'd be extremely grateful for help within this matter. I don't know how to make it work.
 

Squarespace provides a method to access the page content via ajax and return as JSON definition

View JSON Data — Squarespace Developers

In your case the url is https://dawidbania.com/joanna-wojciech-weddingday?format=json-pretty, it actually reduce the initial page size to around 21KB (since it purely text).

With this technique you can call the page's json data on another page and process inifinite scrolling there, so far there is no specfic solution but that how I did for other client project

On 7/4/2021 at 2:43 AM, bangank36 said:

Squarespace provides a method to access the page content via ajax and return as JSON definition

View JSON Data — Squarespace Developers

In your case the url is https://dawidbania.com/joanna-wojciech-weddingday?format=json-pretty, it actually reduce the initial page size to around 21KB (since it purely text).

With this technique you can call the page's json data on another page and process inifinite scrolling there, so far there is no specfic solution but that how I did for other client project

Thank you for your response. Unfortunately, I need to keep the images visible, not turned into text containing their file names... 🙂

1 hour ago, dbania said:

Thank you for your response. Unfortunately, I need to keep the images visible, not turned into text containing their file names... 🙂

It's the text contains the image url already, you can use javascript to parse it into html content, I did not mean to append these text into the gallery directly

8 hours ago, bangank36 said:

It's the text contains the image url already, you can use javascript to parse it into html content, I did not mean to append these text into the gallery directly

Thank you, Bangank36. Is there a specific code I may use to make it happen? I'm a complete newbie when it comes to this kind of solutions...

10 hours ago, dbania said:

Thank you, Bangank36. Is there a specific code I may use to make it happen? I'm a complete newbie when it comes to this kind of solutions...

You may find Universal Filter plugin to try it out