Lazyload-Technik fürs Nachladen der Bilder. Besonderheit: Bilder werden 3 Screens (3 x Browserfentserhöhe) vor der eigentlichen Position geladen, um beim Erreichen des Viewports bereits sichtbar zu sein. Ohne noscript-Fallback.

_scripts.js

addEventListener(
    'scroll',
    function() {
        var i,
            img,
            rect,
            images = document.querySelectorAll('[lazyload-src]');

        if ( ! images.length ) {
            return;
        }

        for (i = 0; i < images.length; i++) {
            img = images[i];
            rect = img.getBoundingClientRect();

            if ( rect.top >= 0 && rect.top <= window.innerHeight * 3 ) {
                img.src = img.getAttribute('lazyload-src');
                img.style.visibility = 'visible';
                img.removeAttribute('lazyload-src');
            }
        }
    }
);

index.html

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=" lazyload-src="http://placehold.it/350x150" style="margin-top: 2000px; width:350px; height: 150px; visibility:hidden" />