This example shows a pure JS (no jQuery or shit) function that loads the images only they are currently in the visible area of the window.
You can open your dev-tools and monitor how the requests are made gradually when you scroll.
Note 1: only vertical scrolling is monitored here.
Note 2: for rendering optimization, images start to load 500px under the visibility line and 50px above. You can edit this if you want to.
For a slightly optimized version, I suggest you take a look here.
(Oh, and these images are rendered with Sebsauvages “webGobbler”.)