Being lazy with image loading...

Fri, 06 July 2018

example.js
    var runLoad = function() {
        var lazy = $('img.im-lazy');
        if (lazy.length > 0) {
            for (var i=0;i<lazy.length;i++){
                if ($(lazy[i]).visible(true) === true) {
                    $(lazy[i]).attr('src', $(lazy[i]).attr('data-src'));
                    $(lazy[i]).removeAttr('data-src');
                    $(lazy[i]).removeClass('im-lazy');
                }
            }
        }
    };
    addEventListener('lazyLoad', function(){
        runLoad();
    });
    addEventListener('scroll', function(){
        runLoad();
    });
example.html
<img src='/some/path/to/temporary/loading.gif' data-src='/path/to/actual/file-1.jpg' class='im-lazy' />
<img src='/some/path/to/temporary/loading.gif' data-src='/path/to/actual/file-2.jpg' class='im-lazy' />