Split more than 300 images in to pages ?

[iNoize]

Hello, 
i have an Photography page based on PW. Now is the Problem that the loading time is to long.

Idea was to split every 20 images in to pages for Ajaxloading. 
I dont know how generate all 20 images a new URLsegment.
I just cant  get it.  

Thanks for advice 

[abdus]

Did you consider using lazy loading instead?

http://afarkas.github.io/lazysizes/

https://github.com/conclurer/TextformatterSrcset

[iNoize]

I dont know is the better option ? There will be later more than 300 pictures per page i think. 
But its an interesting idea  

[abdus]

It's certainly better than putting plain <img> tags on the page.

How many images you have on the page doesnt really matter. Images either have a 1x1px transparent GIF or a low quality placeholder. As visitor scrolls down the page JS swaps placeholders with a real/HQ image and browser starts loading the high quality version. If user doesnt scroll down to an image, it doesnt load. Pages load much quicker and you get save bandwidth in the process.

[Peter Knight]

28 minutes ago, abdus said:

It's certainly better than putting plain <img> tags on the page.

How many images you have on the page doesnt really matter. Images either have a 1x1px transparent or a low quality placeholder. As visitor scrolls down the page JS swaps placeholders to a real/hq url and browser starts loading high quality version. If user doesnt scroll down to an image it doesnt load. Pages load much quicker and you get to save bandwidth.

I started using LazySizes recently and really like it for large image heavy pages.

If you start with the basic lazy loading and get comfortable with it you can then look at the srcset feature which loads different sized images based on the user device.

[dragan]

There's always good old pagination you could use... 

https://processwire.com/api/modules/markup-pager-nav/

Maybe in 2017 that's not considered "sexy", but hey - if it works, it works

 

[Robin S]

A post from Ryan where he shows how you can use MarkupPagerNav to paginate an image field: https://processwire.com/talk/topic/390-images-pagination/?do=findComment&comment=2928