what's the event that trigger the functionality that some portions will only start loading dynamically when we scroll down to a particular section

How did google+ implement their infinite scrolling (https://plus.google.com/1053545327157982232开发者_StackOverflow中文版99/posts/gLnVUU7Y8DL) ?

example page: https://plus.google.com/photos/104987932455782713675/albums/posts

I'm wondering what's the event that trigger the ajax load that they use?

Did they fire a check on window.onscroll and check the pageYOffset to be of a certain value before triggering the ajax load? (because somehow this feels like a rather dirty solution to me)

Basically I'm wondering what's the trick usually used, and what other tricks can we use to mimick this behavior?

---

That's called lazy loading and I'm guessing there are numerous tricks behind it - scroll, visibility of elements in the viewport, and who knows what else.

I would suggest having a look at source of the many lazy load plugins (and tutorials) out there. That should give you a better idea of how it's done.

---

It can be a really annoying feature if content doesn't load until it's scrolled into view. If pages are that large, other strategies should be considered such as summaries with thumbnails that link to full articles (e.g. Google news), reducing the size of the page (nearly any news site), or letting users select how many entries are on a page (e.g. Stackoverflow).

---

For jQuery, there is the plugin "jquery-appear" http://code.google.com/p/jquery-appear/

From the description:

Mimics a custom "appear" event, which fires when an element scrolls into view or otherwise becomes visible to the user.

$('#foo').appear(function() {
  $(this).text('Hello world');
});

This plugin can be used to prevent unnecessary requests for content that's hidden or outside the viewable area.

Check the examples http://code.google.com/p/jquery-appear/wiki/Examples