JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/imakewebthings/waypoints/master/lib/jquery.waypoints.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/master/dist/css/bootstrap.min.css">
<script src="https://rawgit.com/desandro/imagesloaded/master/imagesloaded.pkgd.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-4">
            <div class="image-container">
                <img src="img/1x1.gif" data-original="http://placehold.it/800x600" data-medium="http://placehold.it/400x300" class="lazy loading"/>
            </div>
        </div>
    </div>
</div>

CSS

.loading {
    cursor: wait !important;
}
.image-container img {
    width: 100%;
    height: auto;
    opacity: 0;
    -webkit-transition: all 5s ease-in-out;
    transition: all 5s ease-in-out;
}
.image-container img.loaded {
    opacity: 1;
}

JavaScript

var browser_width,
	browser_height;

//
//resizeHandler = function() {
	//browser_width = $(window).width();
	//browser_height = $(window).height();
//}

//
$.fn.loadImage = function() { 	
    
    return this.each(function() {
		
        if ($(window).width() > 768) {
			var toLoad = $(this).data('original');
        } else {
	        var toLoad = $(this).data('medium');
        }
		
        var $img = $(this);
					
		$('<img />').attr('src', toLoad).imagesLoaded(function() {
			$img.attr('src', toLoad).addClass('loaded').removeClass('loading');
		});
        
	});
    
};

//
$(document).ready(function() {
    
    //resizeHandler();
    
    //
    $('.lazy').each(function() {
        var $img = $(this);
        $img.waypoint(function() {
            $img.loadImage();
        }, { offset: '125%' });
    });
    
});