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”.)