JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<img data-src="http://placekitten.com/g/200/300" alt="cat">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img data-src="http://placekitten.com/g/200/300" alt="cat">
<img data-src="http://placekitten.com/g/200/300" alt="cat">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<img data-src="http://placekitten.com/g/200/300" alt="cat">

CSS

.hidden {
   // opacity: 0;
}

JavaScript

var $window = $(window),
    windowWidth = $window.outerWidth(),
    windowHeight = $window.outerHeight();

//$window.scroll(fadeSection);
//fadeSection();



$.fn.lazyLoading = function(params) {
    var defaults = $.extend({
            hiddenClass: 'hidden'
        }, params),
        data = this.data();
    
    return this.each(function(index, item) {
        var $item = $(item);
        
        $item.prop({
            src: data.src,
            'class': defaults.hiddenClass
        });
    });
};

$('.invisible').lazyLoading();

function fadeSection() {
    $('.invisible').each(function () {
        var $this = $(this),
            threshold = $this.outerHeight() / 2, // half the image
            imgPosition = $this.position().top - $window.scrollTop();

        if (imgPosition < (windowHeight - threshold)) {
            $this.animate({
                opacity: 1
            }, {
                queue: false,
                duration: 300,
                complete: function () {
                    $this.removeClass('invisible');
                }
            });
        }
    });
}