How are the images downloaded on when you scroll?

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 an开发者_如何学编程d every image on my page?

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

There is a jQuery plugin called LazyLoad, it looks like the original author has stopped development, but there are several pull requests on GitHub that look like they fix the issues that the author mentioned as being problems

http://www.appelsiini.net/projects/lazyload

https://github.com/tuupola/jquery_lazyload/pulls

Instead of downloading all the images at once, you write your code such that you download only as many that a page can show(say 20). Then on scrolling(on reaching the bottom of the page), you can make an ajax call to load next 20 images and append them to the existing html page.