JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.0.0/isotope.pkgd.min.js"></script>
<div class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" style="background-image: url('http://www.appelsiini.net/projects/lazyload/img/grey.gif');"></div>
<div class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" style="background-image: url('http://www.appelsiini.net/projects/lazyload/img/grey.gif');"></div>
<div class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" style="background-image: url('http://www.appelsiini.net/projects/lazyload/img/grey.gif');"></div>
<div class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" style="background-image: url('http://www.appelsiini.net/projects/lazyload/img/grey.gif');"></div>
<div class="lazy" data-original="http://www.appelsiini.net/projects/lazyload/img/bmw_m1_hood.jpg" style="background-image: url('http://www.appelsiini.net/projects/lazyload/img/grey.gif');"></div>

CSS

.lazy {
    position: relative;
    width: 765px;
    height: 574px;
    display: block;
    margin-bottom: 10px;
}

JavaScript

jQuery(document).ready(function ($) {
    var $win = $(window),
        $imgs = $("div.lazy"),
        $con = $('#container').isotope();

    function loadVisible($els, trigger) {
        $els.filter(function () {
            var rect = this.getBoundingClientRect();
            return rect.top >= 0 && rect.top <= window.innerHeight;
        }).trigger(trigger);
    }

    $con.isotope('on', 'layoutComplete', function () {
        loadVisible($imgs, 'lazylazy');
    });

    $win.on('scroll', function () {
        loadVisible($imgs, 'lazylazy');
    });

    $imgs.lazyload({
        effect: "fadeIn",
        failure_limit: Math.max($imgs.length - 1, 0),
        event: 'lazylazy'
    });

});