Sample Directive for Defer loading image

ncb-imgdefer.js

module.directive('ncbImgdefer', function ($http, $datacontext) {

    var imgList = [];

    var existingTimeout = null;
    function fixIsotope() {

        if (existingTimeout != null) {
            window.clearTimeout(existingTimeout);
            existingTimeout = null;
        }

        existingTimeout = window.setTimeout(function () {

            $("[isotope]").isotope('layout');
            window.dispatchEvent(new Event('resize')); //required by some plugins

        }, 400);

    };

    function loadImageIfAppeared($element, referencePoint) {

        var src = $element.attr("ncb-imgdefer");
        var isReize = src.indexOf("/") == 0;
        var offSet = $element.offset();

        if (referencePoint > offSet.top) {

            if (isReize) {

                $element.imgElement.src = "/__resizeh/" + $element.attr("key");
            }
            else {
                
                $element.imgElement.src = src;
            }

            return false;
        }

        return true;
    }

    if (window.scrollWatch == null) {

        window.scrollWatch = function () {

            if (imgList.length == 0) {
                return;
            }

            var remaining = [];
            var bottom = document.documentElement.scrollTop + window.innerHeight;

            imgList.forEach(function ($element) {

                if (loadImageIfAppeared($element, bottom)) {

                    remaining.push($element);
                }
            });

            imgList = remaining;

            if (imgList.length == 0) {
                fixIsotope();
            }
        };

        window.onscroll = window.scrollWatch;
        window.setTimeout(window.scrollWatch, 400);
    };

    function link($scope, $element, attrs) {

        var imgElement = $element[0];
        if ($element.is("img") == false) {

            imgElement = $('<img/>')[0];
            imgElement.$backgroundTarget = $element;
        }

        $element.imgElement = imgElement;

        var fallback = $element.attr("ncb-imgdefer");

        imgElement.onload = function () {

            if (imgElement.$backgroundTarget != null) {

                imgElement.$backgroundTarget.css("background-image", "url('" + imgElement.src + "')");
                $(imgElement).remove();

                return;
            }

            fixIsotope();
        };

        imgElement.onerror = function () {

            fixIsotope();

            if (imgElement.src != fallback && $element.attr("fallback") != "1") {

                $element.attr("fallback", "1");
                imgElement.src = fallback;

                imgElement.onload = function () {

                    fixIsotope();
                    imgElement.updated = true;

                    if (imgElement.$backgroundTarget != null) {

                        imgElement.$backgroundTarget.css("background-image", "url('" + imgElement.src + "')");
                        $(imgElement).remove();

                        return;
                    }

                };
            }

        };

        // element is above fold and should show image now
        if ($element.parents("[abovefold]").length > 0 || $element.is("[abovefold]")) {

            loadImageIfAppeared($element, 99999999);
            return;
        }

        imgList.push($element);

    };


    return {
            restrict: 'A',
            link: link,
            scope: false
    };
});