Photo Wall that Scrolls Forever Loading New Photos at Bottom

I was reading the code at iworkfortheinternet.org and learned how to do this "scrolling forever wall" effect. It's clever.

The gist of it is that there's a div, id="loader" that is used to detect where page is scrolled. Every second, the position of #loader is checked. If it's almost on-screen, then it uses ajax to fetch the next page of images, and inserts them into the page.

The logic to determine if #loader is almost visible is:

if (1000 > $('#loader').offset().top - ($(window).scrollTop() + $(window).height()))

That expression is true if #loader is less than 1000 pixels from the bottom of the window. ( $('#loader').offset().top is the vertical position of the #loader. ($(window).scrollTop() + $(window).height()) is the bottom of the window relative to the top of the document.)

There are a couple globals, next_page and loading_next_page, that are checked to prevent the page from loading a nonexistent page or requesting a page while the current one is still being loaded.

If the server returns an error, #loader is hidden, so that no more loading will happen.

All the content being loaded has a class of .hidden. A function that runs every second looks for all the .hidden elements, and fades the top one into view. This prevents the new content from appearing abruptly.