How do I make content load when the user scrolls down to it?

Question

Possible Duplicate:
How to load the web page content based on user scrolling

I'm making a single page website and I'm hoping to achieve the effect that you can see on http://www.talentgarden.it/it/#!/home where the content loads as you scroll down. Can anyone tell me how to do this, and how to achieve some of the different fade-in effects that are used on that site.

Solution 1

i use Lazyload plugin for it.See for more details.
http://www.appelsiini.net/projects/lazyload

Solution 2

While lazy load may help. I suspect the site you linked to is actually using something closer to Scrollorama

Scrollorama is designed to alter (including show/hide) content as you scroll down to it.

Solution 3

In your example there the page doesn't actually load when the user scrolls. The content is actually hidden, and then is shown when the user scrolls.

Anyway, it is all about reading the difference in height of the content, and the browser window itself. For the scrolling mechanism of for example Twitter – Google "Twitter Infinite Scroll".

For an example like the one you show there – check out this JS Bin demo (click render and then check the top right corner, you get the idea). Also, I believe the plugin used for that specific site is "Lazyload" plugin for jQuery. Quite easy to work with I believe; http://www.appelsiini.net/projects/lazyload It delays the rendering of images, witch makes the initial load time a bit faster.

Comments

[Jared Farrish]

Cool plugin; that looks more like what Talent Garden is doing in practice.