Delay Loading

jquery.delayload.js

// Functions to help figure out whether elements are in the viewport
//  and lazy-load their content if so.
// Implemented as jQuery plugins.
(function() {

    $.fn.inView = function(nearThreshold) {
        var $elem = $(this);
        // Checks if its visible, CSS-wise
        if (!$elem.is(":visible")) {
            return false;
        }
        // Checks if its visible, screen-wise, within threshold
        var viewportHeight = $(window).height();
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var elemTop    = $elem.offset().top;
        nearThreshold = nearThreshold || 0;
        if ((scrollTop + viewportHeight + nearThreshold) > elemTop) {
            return true;
        }
        return false;
    };

    $.fn.delayLoad = function(nearThreshold) {
        var $elem = $(this);
        // divs with background-image set
        if ($elem.data("delayed-bgimage") &&
            $elem.css("background-image") === "none" &&
            $elem.inView(nearThreshold)) {
            _.defer(function() {
                $elem.css("background-image", "url(" + $elem.data("delayed-bgimage") + ")");
            });
            return true;
        } 
        // iframes or images
        if ($elem.data("delayed-src") &&
            (!$elem.attr("src") || $elem.attr("src") === "about:blank") &&
            $elem.inView(nearThreshold)) {
            _.defer(function() {
                $elem.attr("src", $elem.data("delayed-src"));
            });
            return true;
        }
        return false;
    };

}());