We call this design pattern Lazy
Loading. There already lots of plugins achieved it, such as loading
images by scrolling. Say
Load Plugin for jQuery:
of images in long web pages. Images outside of viewport (visible part
of web page) wont be loaded before user scrolls to them. This is
opposite of image preloading.
Using Lazy Load on long web pages containing many large images makes
the page load faster. Browser will be in ready state after loading
visible images. In some cases it can also help to reduce server load.
You can go to their web page to checkout the full example and api.