Lazyload function

example-usage.html

<!-- Background Image Usage -->
<div data-lazyload="bg" data-lazyload-src="https://path/to/image.jpg"></div>

<!-- Image Usage -->
<img data-lazyload="img" data-lazyload-src="https://path/to/image.jpg" />

jquery-snippet.js

/*
* LazyLoad background Images
* */

$(window).on("resize scroll", function() {
    lazyLoadBg();
});

lazyLoadBg();

function lazyLoadBg(){
    $('[data-lazyload]').each(function(){
        var el = $(this);
        var type = el.data("lazyload");
        var src = el.data("lazyload-src");
        //load up images 500 px before viewport
        var viewOffset = 500;
        if(type == "bg"){
            viewOffset = 0
        }
        var elementTop = el.offset().top - viewOffset;
        var elementBottom = elementTop + el.outerHeight();
        var viewportTop = $(window).scrollTop();
        var viewportBottom = viewportTop + $(window).height();
        var inView = elementBottom > viewportTop && elementTop < viewportBottom;
        if(inView){
            if(type === "bg"){
                el.css('background-image','url(' + src + ')');
            }
            if(type === "img"){
                el.attr("src", src);
            }
        }
    });
}