Solusi Untuk Meningkatkan Kinerja Loading Gambar Blog

Saat lagi surfing di beberapa web blog, saya menemukan beberapa web blog yang menggunakan gambar besar sebagai background header atau gambar besar dalam posting tapi loading blog tidak terganggu. Ketika gambar di muat, gambar tidak langsung terlihat sepenuhnya tapi sepotong demi sepotong gambar terlihat setelah itu baru sepenuhnya gambar terbuka. Saat itu saya yakin kalau pemilik blog menggunakan script tertentu sehingga gambar ngeload seperti itu. Saya pun melihat view source dari web blog tersebut dan menemukan kode yang mereka gunakan.

Kode yang mereka gunakan, mereka sebut dengan nama Lazy Load Image Plug-in. Ternyata kode ini sudah lulus tes di beberapa aplikasi seperti Safari 5.1, Safari 6, Chrome 20, Firefox 12 pada OSX dan Chrome 20, IE 8, IE 9 di Windows, Safari 5.1 pada iOS 5 untuk iPhone dan iPad.

Lazy Load Image Plug-in dapat meningkatkan kinerja gambar yang berupa :

1. Gambar Posting
2. Thumbnail Posting
3. Gravatar gambar
4. Konten iframe

Cara memasang Lazy Load Image Plug-in di blog

• Login ke blogger → Klik Template → Pilih Edit HTML
• Letakkan kode berikut di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Project home: http://www.appelsiini.net/projects/lazyload Version:  1.8.3
* Republished by Muhammad Septi Rosidi www.tutorialblogspot.com
*/
(function($, window, document, undefined) {
    var $window = $(window);
    $.fn.lazyload = function(options) {
        var elements = this;
        var $container;
        var settings = {
            threshold       : 0,
            failure_limit   : 0,
            event           : "scroll",
            effect          : "show",
            container       : window,
            data_attribute  : "original",
            skip_invisible  : true,
            appear          : null,
            load            : null
        };
        function update() {
            var counter = 0;
            elements.each(function() {
                var $this = $(this);
                if (settings.skip_invisible && !$this.is(":visible")) {
                    return;
                }
                if ($.abovethetop(this, settings) ||
                    $.leftofbegin(this, settings)) {
                        /* Nothing. */
                } else if (!$.belowthefold(this, settings) &&
                    !$.rightoffold(this, settings)) {
                        $this.trigger("appear");
                        /* if we found an image we'll load, reset the counter */
                        counter = 0;
                } else {
                    if (++counter > settings.failure_limit) {
                        return false;
                    }
                }
            });
        }
        if(options) {
            /* Maintain BC for a couple of versions. */
            if (undefined !== options.failurelimit) {
                options.failure_limit = options.failurelimit;
                delete options.failurelimit;
            }
            if (undefined !== options.effectspeed) {
                options.effect_speed = options.effectspeed;
                delete options.effectspeed;
            }
            $.extend(settings, options);
        }
        /* Cache container as jQuery as object. */
        $container = (settings.container === undefined ||
                      settings.container === window) ? $window : $(settings.container);
        /* Fire one scroll event per scroll. Not one scroll event per image. */
        if (0 === settings.event.indexOf("scroll")) {
            $container.bind(settings.event, function(event) {
                return update();
            });
        }
        this.each(function() {
            var self = this;
            var $self = $(self);
            self.loaded = false;
            /* When appear is triggered load original image. */
            $self.one("appear", function() {
                if (!this.loaded) {
                    if (settings.appear) {
                        var elements_left = elements.length;
                        settings.appear.call(self, elements_left, settings);
                    }
                    $("<img />")
                        .bind("load", function() {
                            $self
                                .hide()
                                .attr("src", $self.data(settings.data_attribute))
                                [settings.effect](settings.effect_speed);
                            self.loaded = true;
                            /* Remove image from array so it is not looped next time. */
                            var temp = $.grep(elements, function(element) {
                                return !element.loaded;
                            });
                            elements = $(temp);
                            if (settings.load) {
                                var elements_left = elements.length;
                                settings.load.call(self, elements_left, settings);
                            }
                        })
                        .attr("src", $self.data(settings.data_attribute));
                }
            });
            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if (0 !== settings.event.indexOf("scroll")) {
                $self.bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $self.trigger("appear");
                    }
                });
            }
        });
        /* Check if something appears when window is resized. */
        $window.bind("resize", function(event) {
            update();
        });
        /* With IOS5 force loading images when navigating with back button. */
        /* Non optimal workaround. */
        if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
            $window.bind("pageshow", function(event) {
                if (event.originalEvent.persisted) {
                    elements.each(function() {
                        $(this).trigger("appear");
                    });
                }
            });
        }
        /* Force initial check if images should appear. */
        $(window).load(function() {
            update();
        });
        return this;
    };
    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
    $.belowthefold = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.height() + $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    $.rightoffold = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.width() + $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
    $.abovethetop = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    $.leftofbegin = function(element, settings) {
        var fold;
        if (settings.container === undefined || settings.container === window) {
            fold = $window.scrollLeft();
        } else {
            fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    $.inviewport = function(element, settings) {
         return !$.rightoffold(element, settings) && !$.leftofbegin(element, settings) &&
                !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
     };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() or */
    /* $("img").filter(":below-the-fold").something() which is faster */
    $.extend($.expr[':'], {
        "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0}); },
        "above-the-top"  : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        "right-of-screen": function(a) { return $.rightoffold(a, {threshold : 0}); },
        "left-of-screen" : function(a) { return !$.rightoffold(a, {threshold : 0}); },
        "in-viewport"    : function(a) { return $.inviewport(a, {threshold : 0}); },
        /* Maintain BC for couple of versions. */
        "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0}); },
        "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0}); },
        "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0}); }
    });
//]]>
</script>
<script charset='utf-8' type='text/javascript'>
$(function() {
   $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid2oKM2jjUDzvZ0R3S5Msk-38756YA5jjJQppn3BCB4EQvaMS6qEDHqTV4lb2VbL55d_YTo2osa0NRWrXoGfLJY-H6nspBL1jULeeyokrEpfyBjup5u5XK_CwOXeJFWHmUiFxynZgsTz8/s1600/grey.gif&quot;,threshold : 200});
});
</script>

• Simpan template

Untuk menguji Lazy Load Image Plug-in ini, silahkan memasukkan beberapa gambar besar di postingan sobat. Perhatikan dengan teliti kecepatan blog anda SEBELUM dan SETELAH di tambahkan Lazy Load Image Plug-in. Untuk mengecek kecepatan loading blog, silahkan mamfaatkan layanan gratis Google Site Speed.