Javascript Lazy Loading Image untuk Blogger

Javascript ini cocok untuk template blog yang menggunakan gambar thumbnail dengan ukuran yang sedikit agak besar, karena dapat mengurangi beban loading blog.

Disini saya sedikit memodifikasi javascript ini agar gambar yang diload dapat ditentukan lebar dan tingginya. sesuai keinginan.

Demo

Contoh penggunaan, plugin ini akan bekerja pada gambar yang memilik atribut class lazy:

<img src="blank.gif" class="lazy" data-src="/images/full-size.jpg" width="240" height="152">

• blank.gif adalah gambar pengganti sebelum gambar asli dimuat.
• data-src disi dengan url gambar asli
• width untuk menentukan lebar dari gambar tersebut, harus disi
• height untuk menentukan tinggi dari gambar tersebut, harus disi

Simpan Javascript ini diatas kode </body>

<script type="text/javascript">
//<![CDATA[
/* 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);
//]]>
</script>

Share this post