Script JQuery Untuk Lazy Load Image di Blogger

Seperti kita ketahui, suatu gambar mmeiliki resolusi yang sangat bervariasi. Jika gambar tersebut disematkan dalam sebuah tempalate blog, pasti akan mempengaruhi performa dan kecepatan blog tersebut. Terutama untuk gambar-gambar yang memiliki resolusi tinggi, sudah pasti blog anda akan ngap-ngapan untuk meload gambar tersebut.

Namun semua itu dapat diatasi dengan bantuan script plugin yang dapat anda sematkan pada template blog. Banyak sekali pluin untuk mempercepat proses loading gambar, dari yang gratis hingga berbayar. Kebanyakan script-script tersebut ditulis dalam bahasa Java. Pada artikel ini kami akan coba mengulas tentang script JQuery yang merupakan bagian dari bahasa Java. Dengan bantuan script yang akan kita bahas pada artikel ini, proses loading image pada blog anda akan dapat dikurangi.

Lazy loader adalah plugin jQuery yang ditulis dalam JavaScript. Ini menunda pemuatan gambar di halaman web (panjang). Gambar di luar area pandang (bagian halaman web yang terlihat) tidak akan dimuat sebelum pengguna menggulir ke gambar tersebut. Menggunakan lazy load pada halaman web panjang yang berisi banyak gambar besar membuat halaman dimuat lebih cepat. Browser akan dalam keadaan siap setelah memuat gambar yang terlihat. Dalam beberapa kasus, ini juga dapat membantu mengurangi beban server.

Apa itu Plugin Lazy Load?

Skrip yang akan menunda pemanggilan file sebelum melakukan aktivitas tertentu. Untuk Lazy Load Blogger Image script. Panggilan file akan ditunda sebelum aktivitas pengguliran halaman terjadi.

Pada artikel ini kami akan memberikan tips untuk menunda pemuatan gambar sebelum menggulir saat memuat halaman gambar tidak akan dimuat sampai kita menggulir halaman dan itu akan meningkatkan kecepatan blog. Jadi secara besarnya, proses loading image tak akan terjadi jika mouse atau kursor anda atau tampilan blog dilayar monitor anda tidak ada gambar. Script akan bekerja jika kursor anda atau yang anda lihat dimonitor sudah menunjukkan gambar (image).

Perlu anda ingat sekali lagi, Lazy Loading adalah istilah yang diberikan untuk atribut HTML yang diterapkan pada gambar untuk mencegah browser merendernya sebelum berada di area yang terlihat. Dengan kata lain, browser hanya akan merender gambar saat halaman digulir hingga mencapai tag gambar. Oleh karena itu, ini juga disebut pemuatan sesuai permintaan.

Fungsi dari atribut ini adalah untuk mengoptimalkan rendering halaman yang memengaruhi waktu pemuatan blog Anda; itu menjadi lebih cepat karena gambar tidak dirender sebelum masuk ke area yang terlihat. Skrip pemuatan lambat juga disertakan dalam RemlinkJS yang berguna untuk menghapus hyperlink gambar pada postingan blogger.

kecepatan, itu berarti ketika Anda menginstal lazy load di tema Blogspot Anda, kecepatan blog Anda pasti akan meningkat saat memuat, setelah menginstal anda dapat melihat efek instan pada pemuatan halaman. Plugin lazy load untuk gambar akan menunda hasil pemuatan gambar kecepatan website anda akan meningkat.

Mengapa Script Lazy Load itu Penting?

Muatan besar halaman web penuh dengan gambar, skrip, stylesheet, font, dan video. Gambar menempati lebih dari 60% ukuran halaman web biasa. Tidak mungkin untuk menyingkirkannya karena penting untuk desain halaman web.

Tanpa pengoptimalan apa pun, browser web Anda mengunduh semuanya sebelum merender halaman. Ini membuat pemuatan halaman lebih lambat. Masuk akal untuk melakukan apa yang Anda bisa untuk membuat halaman web Anda dimuat lebih cepat. Dan dalam hal gambar, mereka adalah kontributor terbesar untuk ukuran situs web.

Jadi jika Anda mulai dengan mereka, itu adalah ide yang bagus karena situs web Anda akan dimuat dengan cepat. Di sinilah pemuatan lambat berguna karena hanya mengunduh bagian gambar yang terlihat di halaman Anda pada waktu tertentu.

Dengan menggunakan plug-in Lazy load dari JQuery, anda dapat memuat halaman web panjang yang berisi banyak gambar besar dan memuat halaman lebih cepat dan browser akan dalam keadaan siap setelah memuat semua gambar yang terlihat. Dalam beberapa kasus, plug-in Lazy load juga dapat membantu mengurangi beban server.

Cara Menulis Script JQuery Lazy Load di blogger

Bagian ini sangat penting, karena pembahasannya langsung masuk kebagian teknis yaitu cara menyematkan atau menulis script JQuery ke dalam template Blogger. Sebagai langkah awal anda harus login terlebih dahulu kedalam akun Blogger anda, setelah itu buka halaman HTML script template anda.

Setelah itu anda cari script </body>, letaknya bagian akhir atau paling bawah dari script HTML anda. Tepat di atas script </body> tersebut anda ketikkan script di bawah ini.

Pasang JQuery

<script crossorigin='anonymous' integrity='sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=' src='https://code.jquery.com/jquery-3.7.1.js'/>

Kemudian anda ketikkan script Lazy loadnya, di atas script tersebut. Script Lazy Load JQuery dapat anda lihat seperti contoh di bawah ini.

Script 1 (Lazy Load JQuery)

<script type='text/javascript'>
//<![CDATA[
// Lazy Load
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(b){a.extend(c,b)}var d=this;if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);b.loaded=true}).attr("src",a(b).attr("original"))}});if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo5RhKMc-RsbC78UJ_wQEsCLjGFjX_LGdzqGGwGWWEvD6az2nWe7HqzC_jw4qL_NLy_PBsby6oM9ZJ4dO_uIKChtOhKwXLDaQ3inUVKfsOtg-0FP_UoZ_weUa6RBctbPTesmjZafZU1PRk/s1600/Askwithloud.com.gif",effect:"fadeIn",threshold:"-50"})});
//]]>
</script>

Script 2 (Lazy Load JQuery)

<script type='text/javascript'>
//<![CDATA[

/*
 * Lazy Load - jQuery plugin for lazy loading images

 */
(function($) {

    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect       : "show",
            container    : window
        };
                
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        
        this.each(function() {
            var self = this;
            
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));     
            }

            if ("scroll" != settings.event || 
                    undefined == $(self).attr("src") || 
                    settings.placeholder == $(self).attr("src") || 
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) || 
                     $.belowthefold(self, settings) || 
                     $.rightoffold(self, settings) )) {
                        
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);      
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
            
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        
        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
        
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
    
})(jQuery);

//]]>
</script>

<script charset='utf-8' type='text/javascript'>

$(function() {

   $(&quot;img&quot;).lazyload({placeholder : &quot;http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif&quot;,threshold : 200});

});

</script>

Silahkan anda pilih salah satu script Lazy Load di atas.

Lazy Loading bagus untuk meningkatkan kecepatan blog Anda karena membantu browser untuk fokus pada apa yang harus dirender terlebih dahulu dan apa yang harus dirender setelahnya. Anda tidak perlu khawatir jika gambar Anda tidak akan muncul karena semua gambar yang Anda letakkan di bagian atas halaman akan ditampilkan saat halaman dimuat karena sudah berada di area yang terlihat.