Lazy

lazyload.js

/* lazyload.js (c) Xander Dumaine
 * MIT License (http://www.opensource.org/licenses/mit-license.html)
 *
 * Adapted from https://css-tricks.com/snippets/javascript/lazy-loading-images/ 
 *
 * expects a bunch of
 * `<img src="blank.gif" data-src="my_image.png">`
 */

!function (window) {
    var $q = function (query, result) {
        if (document.querySelectorAll) {
            res = document.querySelectorAll(query);
        } else {
            var styleSheet = document.styleSheets[0] ||
                                document.createStyleSheet();
            styleSheet.addRule(query, 'f:b');
            for (var i = 0; i < document.all.length; i++) {
                document.all[i].currentStyle.f && result.push(document.all[i]);
            }
            styleSheet.removeRule(0);
        }
        return res;
    };

    var addEventListener = function (evt, fn) {
        var elementToAttach = window;
        if (elementToAttach.addEventListener) {
            elementToAttach.addEventListener(evt, fn, false)
        } else if (elementToAttach.attachEvent) {
            elementToAttach.attachEvent('on' + evt, fn)
        } else {
            elementToAttach['on' + evt] = fn;
        }
    };

    var _has = function (obj, key) {
        return Object.prototype.hasOwnProperty.call(obj, key);
    };

    function loadImage (el, fn) {
        var img = new Image();
        var src = el.getAttribute('data-src');
        img.onload = function() {
            if (!!el.parent) {
                el.parent.replaceChild(img, el);
            } else {
                el.src = src;
            }
            if (typeof fn === 'function') {
                fn();
            }
        }
        img.src = src;
    };

    function elementInViewport (el) {
        var rect = el.getBoundingClientRect()

        return rect.top >= 0 && rect.left >= 0 &&
                rect.top <= (window.innerHeight || document.documentElement.clientHeight);
    };

    var images = new Array();
    var query = $q('img[data-src]');
    var processScroll = function () {
        for (var i = 0; i < images.length; i++) {
            if (elementInViewport(images[i])) {
                loadImage(images[i], function () {
                    images.splice(i, i);
                });
            }
        };
    };
    // Array.prototype.slice.call is not callable under our lovely IE8
    for (var i = 0; i < query.length; i++) {
        images.push(query[i]);
    };

    processScroll();
    addEventListener('scroll',processScroll);

}(this);

lazyload.min.js

!function(e){function t(e,t){var n=new Image,r=e.getAttribute("data-src");n.onload=function(){e.parent?e.parent.replaceChild(n,e):e.src=r,"function"==typeof t&&t()},n.src=r}function n(t){var n=t.getBoundingClientRect();return n.top>=0&&n.left>=0&&n.top<=(e.innerHeight||document.documentElement.clientHeight)}for(var r=function(e,t){if(document.querySelectorAll)res=document.querySelectorAll(e);else{var n=document.styleSheets[0]||document.createStyleSheet();n.addRule(e,"f:b");for(var r=0;r<document.all.length;r++)document.all[r].currentStyle.f&&t.push(document.all[r]);n.removeRule(0)}return res},c=function(t,n){var r=e;r.addEventListener?r.addEventListener(t,n,!1):r.attachEvent?r.attachEvent("on"+t,n):r["on"+t]=n},o=new Array,l=r("img[data-src]"),u=function(){for(var e=0;e<o.length;e++)n(o[e])&&t(o[e],function(){o.splice(e,e)})},a=0;a<l.length;a++)o.push(l[a]);u(),c("scroll",u)}(this);