Lazy Loading for MySQL queries in node.js web app

Question

So I have a page that upon its get I pull some matching rows from the mysql database. Currently I pull 8 as that's how many I want to show on each page. I wanted to implement something that facebook has which i've seen is known as Lazy Loading where when the user scrolls down more content will load, in this case additional sql rows that match the query.

I could just grab a whole lot and have jQuery only render eight at a time but lazy loading sounds much better. Problem is I can't find anything on Lazy Loading with node apps using MySQL. Does anybody know of a tutorial, article or would like to post a detailed explanation of how to do this? (I is a newb)

PS I have seen some post/server side interaction without leaving the page done with ajax but I know literally nothing about ajax, so if there is a way to do it just with javascript or jquery I'm all about that. Thanks for any response!

Answer 1

The concept your are talking about is also called "paging", like when you see a table that displays 10 rows at a time, though really there are 87 rows and page 1 is 1-10, page 2 is 11-20, etc.

When doing lazy loading, your query would order by date (or whatever your criteria) and work something like this:

1. Load the page with the query finding the first 10 items. LIMIT 0, 10
2. Store currentPage=1 locally in your page's javascript, and what size or scroll limit is associated with "page1" - is it based on pixels? Or items displayed?
3. Detect when you scroll to the bottom of the page, or towards the bottom of the page (definitely matters when user scrolls back up!)

4. Initiate the lazy loading query.

   1. First build the spinner on your page
   2. Make a call to your server for the query, with the same ordering, and this time LIMIT based on the last page number, currentPage*10 eg currentPage=3 , so LIMIT 30 40
   3. Add the results to your displayed array when the server responds.
   4. Increase the currentPage count, as associated scrolling limits

5. Wait for user to scroll to next "bottom" and repeat steps 3 and 4.

That's a rough outline, and hopefully points you in the right direction!