JSFiddle - React, Tailwind, and code Playground

HTML

<li class="target label label-info">
    <div class="log"></div>
    <img width="60" vspace="0" hspace="0" height="auto" class="lazy" style=" " alt="Alquiler Apartamento Rohrmoser, Costa Rica" title="Apartamento Amueblado en Rohrmoser" data-src="http://images01.inmotico.com/418/000/4180000000RC/60X0/1bc71df7a9031f547c1ad22e32228431.jpg" />
</li>
<li class="target label label-info">
    <div class="log"></div>
    <img width="60" vspace="0" hspace="0" height="auto" class="lazy" style=" " alt="Alquiler Apartamento Rohrmoser, Costa Rica" title="Apartamento Amueblado en Rohrmoser" data-src="http://images01.inmotico.com/418/000/4180000000RC/60X0/1bc71df7a9031f547c1ad22e32228431.jpg" />
</li>
<li class="target label label-info">
    <div class="log"></div>
    <img width="60" vspace="0" hspace="0" height="auto" class="lazy" style=" " alt="Alquiler Apartamento Rohrmoser, Costa Rica" title="Apartamento Amueblado en Rohrmoser" data-src="http://images01.inmotico.com/418/000/4180000000RC/60X0/1bc71df7a9031f547c1ad22e32228431.jpg" />
</li>
<li class="target label label-info">
    <div class="log"></div>
    <img width="60" vspace="0" hspace="0" height="auto" class="lazy" style=" " alt="Alquiler Apartamento Rohrmoser, Costa Rica" title="Apartamento Amueblado en Rohrmoser" data-src="http://images01.inmotico.com/418/000/4180000000RC/60X0/1bc71df7a9031f547c1ad22e32228431.jpg" />
</li>
<li class="target label label-info">
    <div class="log"></div>
    <img width="60" vspace="0" hspace="0" height="auto" class="lazy" style=" " alt="Alquiler Apartamento Rohrmoser, Costa Rica" title="Apartamento Amueblado en Rohrmoser" data-src="http://images01.inmotico.com/418/000/4180000000RC/60X0/1bc71df7a9031f547c1ad22e32228431.jpg" />
</li>
<li class="target label label-info">
    <div class="log"></div>
    <img width="60" vspace="0" hspace="0" height="auto" class="lazy" style=" " alt="Alquiler Apartamento Rohrmoser, Costa Rica" title="Apartamento Amueblado en Rohrmoser"...

CSS

.log {
    right: 0px;
    position:fixed;
}
li:nth-child(even) {
    background: none repeat scroll 0 0 red;
    height: 100px;
    margin-bottom: 5px;
}
li:nth-child(odd) {
    background: none repeat scroll 0 0 green;
    height: 100px;
    margin-bottom: 5px;
}
img {
    padding:10px;
}

JavaScript

$.fn.is_on_screen = function () {
    var win = $(window);
    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
CheckIt();

function CheckIt() {
    $('.target').each(function () {
        if ($(this).length > 0) { // if target element exists in DOM
            if ($(this).is_on_screen()) { // if target element is visible on screen after DOM loaded
                if ($(this).find('img').attr('data-src')) {
                    var source = $('.target').find('img').attr('data-src');

                    $('.target').find('img').attr('src', source);
                    $(this).find('.log').html('<div class="alert alert-success">target element is visible on screen</div>');

                }
                // log info		
            } else {

                $(this).find('.log').html('<div class="alert">target element is not visible on screen</div>'); // log info
            }
        }
    });

}
$(window).scroll(function () { // bind window scroll event
    CheckIt();
});