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


webgobbler image 05a23abb
webgobbler image 1fe072cd
webgobbler image 2e58a677
webgobbler image 3254ba7e
webgobbler image 4b0e5532
webgobbler image 4eeb3fab
webgobbler image 5796d6d0
webgobbler image 60f9883b
webgobbler image 6a15ac9d
webgobbler image c5dd0b95
webgobbler image cb764fd7
webgobbler image d15483c5
webgobbler image dd0d8de9
webgobbler image ded1a73e
webgobbler image e5d5d0e9