JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<h2>Scroll Down! ⇓</h2>
<ul class='post'>
    <li>
        <img class='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC' data-src='http://2.bp.blogspot.com/-zWCAIZnDzRQ/VPpyIPh4RlI/AAAAAAAAAD0/MUsewnr0mVs/s1600/nophoto.png' width='700' height='430'></img>
    </li>
    <li>
        <img class='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC' data-src='http://1.bp.blogspot.com/-77bRCV9xoOc/UIJiWk3Kh0I/AAAAAAAAGCM/3gGkIF5vNe0/s1600/410_133.jpg' width='900' height='530'></img>
    </li>
    <li>
        <img class='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC' data-src='http://2.bp.blogspot.com/-AGqCG70KPak/TqFfptAfNOI/AAAAAAAAACQ/qELiuhCdgUI/s1600/slide2.jpg' width='500' height='230'></img>
    </li>
    <li>
        <img class='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC' data-src='http://3.bp.blogspot.com/-ChU7KdSQZM4/VI6UNpgQeDI/AAAAAAAAABw/Z9nqwsP02v0/s1600/header.jpg' width='960' height='630'></img>
    </li>
    <li>
        <img class='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC' data-src='http://1.bp.blogspot.com/-rvxMVjyd840/UBP1txN2MRI/AAAAAAAAADg/iokDB6U74J0/s1600/7.jpg' width='800' height='630'></img>
    </li>
    <li>
        <img class='lazy' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC' data-src='http://2.bp.blogspot.com/-KVMHzln6-YE/UWcnhp46N5I/AAAAAAAAAHk/nqi9VgZP0c8/s1600/ComputerDesktopWallpapersCollection355_016.jpg' width='900' height='630'></img>
    </li>
  ...

CSS

body {
    padding:10px;
    background-color:#F1C40F;
    min-height:500px
}
h2 {
    font: bold 20px Times,serif;
    margin: 30px 30px 300px;
}
ul, li {
    padding: 0px;
    margin: 0px;
    list-style: outside none none;
}
.lazy {
    display: block;
    margin: 0px auto 300px;
    border:1px solid #555
}

JavaScript

/* lazyload.js (c) Lorenzo Giuliani
 * MIT License (http://www.opensource.org/licenses/mit-license.html)
 *
 * expects a list of:  
 * `<img src="blank.gif" data-src="my_image.png" width="600" height="400" class="lazy">`
 * modified by Rifan Hidayat <http://obesitystrike.blogspot.com>
 */! function (e) {
    function t(e, t) {
        var n = new Image,
            r = e.getAttribute("width"),
            p = e.getAttribute("height"),
            l = e.getAttribute("data-src").replace(/\/s[0-9]+(\-c)?/, "/w" + r + "-h" + p + "-c");
        n.onload = function () {
            e.parent ? e.parent.replaceChild(n, e) : e.src = l, t ? t() : null
        }, n.src = l
    }

    function n(t) {
        var n = t.getBoundingClientRect();
        return n.top >= 0 && n.left >= 0 && n.top <= (e.innerHeight || document.documentElement.clientHeight)
    }
    for (var r = function (e, t) {
        if (document.querySelectorAll) t = document.querySelectorAll(e);
        else {
            var n = document,
                r = n.styleSheets[0] || n.createStyleSheet();
            r.addRule(e, "f:b");
            for (var l = n.all, c = 0, a = [], i = l.length; i > c; c++) l[c].currentStyle.f && a.push(l[c]);
            r.removeRule(0), t = a
        }
        return t
    }, l = function (t, n) {
        e.addEventListener ? this.addEventListener(t, n, !1) : e.attachEvent ? this.attachEvent("on" + t, n) : this["on" + t] = n
    }, c = new Array, a = r("img.lazy"), i = function () {
        for (var e = 0; e < c.length; e++) n(c[e]) && t(c[e], function () {
            c.splice(e, e)
        })
    }, o = 0; o < a.length; o++) c.push(a[o]);
    i(), l("scroll", i)
}(this);