How are the images downloaded on when you scroll?

Question

How can I achieve the effect where the images are only downloaded once you scroll to that content. Thus if you have a big page and there are images at the bottom of the page, they never get downloaded unless you scroll to that content. If you are still not clear, please watch imdb:

http://www.imdb.com/title/tt1385826/

Let the page load and then scroll to the Cast section. You see only when you scroll the browser makes request for the images and are downloaded. Do I have to write any special code to make that happen for each and every image on my page?

Answer 1

I think that you have to use javascript; when moving the viewport of the webpage, you can calculate when a picture comes into view. At that time you can swap the path of the placeholder image to the correct image.

Here's a page with some explanations: they use this jQuery plugin