Background:
At work I've inherited a theme (Salient by ThemeNectar - http://themeforest.net/item/salient-responsive-portfolio-blog-theme/4363266) that was purchased by a colleague and has since been hacked to pieces. While I would much prefer to recode everything from scratch, that just isn't feasible at this time.
Currently, we use the custom portfolio section to display our large (and growing) catalog of work in images on the front page. We've cut down the image file size as much as possible, but the mansonry script is still pretty slow when it has to style 120+ post thumbnails on the main page.
To solve this, I am currently implementing an infinite scroll feature, or at the very least a "show more posts" button at the bottom. The pagination is all wonky, so the all the easy ways don't seem to work (like the Infinite-Scroll plugin).
Admittedly, I still have lots to learn when it comes to PHP and JavaScript, but I know enough to get by.
The Question:
What I would like to do is run the regular loop, display around 40 posts and a "Show More" button (though infinite scroll would be nice). Then, upon clicking the button or reaching the bottom of the page, run an AJAX script to call a php function that will display the next batch of 40 posts.
Aside from loading posts into an array and remembering the index of the array, how else can I do this? I would really like to find a way to just run the loop again to load more posts but have it start up again where I left off after the previous loop. Is it possible to start the loop at a given post? What functions should I be looking at for this?